js中的立即执行函数的写法,立即执行函数作用是什么?

时间: 2018-05-29阅读: 3257标签: 函数

js立即执行函数是什么?

就是指:声明一个匿名函数,而且该匿名函数会被马上调用。


js使用立即执行函数有什么作用呢?

立即执行函数会创建一个独立作用域, 该作用域的变量外部是无法访问的。立即执行函数主要是为了防止环境污染(也就是说避免变量污染)。在es6中提供了let,使用let声明的变量是块级作用域局部变量。

以一个著名的面试题为例:

var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  liList[i].onclick = function(){
    alert(i) // 为什么 alert 出来的总是 6,而不是 0、1、2、3、4、5
  }
}

为什么 alert 的总是 6 呢,因为 i 是贯穿整个作用域的,而不是给每个 li 分配了一个 i,那么怎么解决这个问题呢?用立即执行函数给每个 li 创造一个独立作用域即可(当然还有其他办法):

var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  !function(j){
    liList[j].onclick = function(){
      alert(j) // 0、1、2、3、4、5
    }
  }(i)
}

在立即执行函数执行的时候,i 的值被赋值给 j,此后 j的值一直不变。i 的值从 0 变化到 5,对应 6 个立即执行函数,这 6 个立即执行函数里面的 j 「分别」是 0、1、2、3、4、5


js立即执行函数的写法有哪些?

1、使用()运算符方式一:

(function(val) {
  console.log(val);  //使用()运算符
})('fly63.com');


2、使用()运算符方式二:

(function(val) {
  console.log(val);  //使用()运算符
}('fly63.com'));


3、使用!运算符:  

!function(val) {
  console.log(val);  //使用!运算符
}('fly63.com');


4、使用+运算符:  

+function(val) {
  console.log(val);  //使用+运算符
}('fly63.com');


5、使用+运算符:    

-function(val) {
  console.log(val);  //使用-运算符
}('fly63.com');


6、使用=运算符:     

var fn = function(val) {
  console.log(val);  //使用=运算符
}('fly63.com');

备注:这里的fn其实打印会发现:其值是undefined哦!


7、其它方式

~function(){
    console.log('fly63.com')
}();

void function(){
    console.log('fly63.com')
}();

new function(){
    console.log('fly63.com')
}();

[ function() {
 console.log('fly63.com')
}() ];

delete function() {
  console.log('fly63.com')
}();

typeof function() {
   console.log('fly63.com')
}();


1, function() {
  console.log('fly63.com')
}();

1 ^ function() {
  console.log('fly63.com')
}();

1 > function() {
   console.log('fly63.com')
}();


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/835

JavaScript中的函数式编程

函数式编程是一种编程范式,是一种构建计算机程序结构和元素的风格,它把计算看作是对数学函数的评估,避免了状态的变化和数据的可变

js中 is_NaN()函数的使用

isNaN() 函数用于检查其参数是否是非数字值。它是JavaScript提供的一个内置函数。这个函数使用了Number() 去转换需要判断的值。Number() 去转换值,如果有任意非数值字符存在则就不是一个数值

初识云函数

什么是云函数?云函数提供了一种直接在云上运行,无状态的、短暂的、由事件触发的代码的能力,云函数与轻服务的关系:云函数,就是FaaS模式的具体实现。同样,对象存储、数据库应用、缓存服务等,是BaaS模式的具体实现。对于轻服务,BaaS和FaaS缺一不可

ES6 - Generator函数

Generator函数是ES6标准中提出的一种异步编程的解决方案。这种函数与普通函数最大的区别在于它可以暂停执行,又可以从暂停的位置恢复继续执行。从语法上看,Generator函数就是一个状态机,封装了许多内部状态。

理解 JavaScript Mutation 突变和 PureFunction 纯函数

不可变性、纯函数、副作用,状态可变这些单词我们几乎每天都会见到,但我们几乎不知道他们是如何工作的,以及他们是什么,他们为软件开发带来了什么好处。在这篇文章中,我们将深入研究所有这些,以便真正了解它们是什么以及如何利用它们来提高我们的Web应用程序的性能。

js调用函数的几种方法_ES5/ES6的函数调用方式

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关。

JavaScript 高阶函数快速入门

把函数以数据的形式去使用,并解锁一些强大的模式。接受和/或返回另外一个函数的函数被称为高阶函数。之所以是高阶,是因为它并非字符串、数字或布尔值,而是从更高层次来操作函数。

Js箭头函数和lambda

es6中的箭头函数,在实际开发中确实比较方便,通常来说会有几个特点:箭头函数中的this会绑定在外部作用域;没有arguments;如果想返回一个对象记得加()包裹;call和apply不能传入this

什么是函数的副作用——理解js编程中函数的副作用

函数副作用是指当调用函数时,除了返回函数值之外,还对主调用函数产生附加的影响。副作用的函数不仅仅只是返回了一个值,而且还做了其他的事情

js类的constructor中不支持异步函数吗?

如果是普通函数,可以用async 和await来解决你的问题。但你这个是在constructor里,constructor 的作用是返回一个对像实例,如果加了async就变成返回一个promise了,所以这个方法行不通

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!