js匿名自执行函数

匿名自执行函数：没有方法名的函数
闭包：闭包是指有权访问另一个函数作用域变量的函数；

通过一个实例来解释：

从网上找到了一个案例，使用了for循环、匿名自执行函数、setTimeout。

案例1：

var value1 =0,value2=0,value3=0;
for(var i =1;i<=2;i++){
  var i2 = i;
  console.log('i2==>',i2);
  (function(){
    var i3 = i;
    console.log('i3==>',i3);
    setTimeout(function(){
      console.log('i==>',i);
      console.log('i2==>',i2);
      console.log('i3==>',i3);
      value1 +=i;
      value2 +=i2;
      value3 +=i3;
    },1);
  })();
}

setTimeout(function(){
  console.log(value1,value2,value3);
},100)

//输出结果
i2==> 1
i3==> 1
i2==> 2
i3==> 2
i==> 3
i2==> 2
i3==> 1
i==> 3
i2==> 2
i3==> 2
6 4 3

解释：

1.匿名自执行函数的几种语法

(function () { /* code */ } ()); // 推荐
(function () { /* code */ })(); 
~function () { /* code */ }(); 
+function () { /* code */ }(); 
!function () { /* code */ }(); 
void function () { /* code */ }();

2.利用自执行函数和闭包来保存某个特殊状态中的值

(function(){//自执行函数
    var i3 = i;
    console.log('i3==>',i3);
    setTimeout(function(){//闭包
      console.log('i==>',i);
      console.log('i2==>',i2);
      console.log('i3==>',i3);
      value1 +=i;
      value2 +=i2;
      value3 +=i3;
    },1);
  })();

自执行函数中的变量会在闭包中调用，根据闭包的特性会将for循环时每次循环的不同值传入闭包；

3.for循环语法理解

for (语句 1; 语句 2; 语句 3) {
 ...
}

语句 1 在循环（代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行

通过下面案例进行解析：

for(var i=1;i<3;i++){
  console.log(i);
  setTimeout(function(){
    console.log('i===>',i);
  },100);
}
//输出
1
2
i===> 3
i===> 3

for循环的时候，i++会在for语句中代码结束后执行，而setTimeout是异步执行的，因此在setTimeout中输出的i实际上是最后一次循环结束后，i再次++后的值。

解释案例1：

看到这里大家应该明白了，案例一中，第一次循环时，i2 = 1，自执行函数中i3=1,但是闭包可以保存不同状态的值，因此，此时传给setTimeout的值只有i3被保存在缓存中，i2,i都将被第二次的循环覆盖，此时setTimeout并没有执行；
当第二次循环时，i2=2;i3=2;同样，i3=2也被保存在闭包中，i2被覆盖；
此时for循环执行结束，开始执行setTimeout函数，这个时候，for循环结束了，并且执行了最后一个语句“i++”,因此，此时为3，并非2；而闭包外面的i2并没有将不同的状态保存在闭包中，只能被覆盖，而闭包中的i3每次的值都会被闭包缓存在内存中，将状态保留下来，因此setTimeout中的都为3，i2都为2，而i3则是每次循环的值；

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程：https://www.jianshu.com/p/e8197d4d9880

领取方式：
如果需要学习视频，欢迎关注【编程微刊】微信公众号，回复【领取资源】一键领取以下所有干货资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！

作者：喜欢坑队友的程序员
链接：https://www.jianshu.com/p/089890d35947
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

秒客网