首页  >  文章  >  web前端  >  js匿名自执行函数实例详解

js匿名自执行函数实例详解

小云云
小云云原创
2018-03-19 17:28:121930浏览

匿名自执行函数:没有方法名的函数,闭包:闭包是指有权访问另一个函数作用域变量的函数;本文主要和大家分享js匿名自执行函数实例详解,希望能帮助到大家。

通过一个实例来解释:

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

案例1:
var value1 =0,value2=0,value3=0;for(var i =1;i<=2;i++){  var i2 = i;  console.log(&#39;i2==>&#39;,i2);
  (function(){    var i3 = i;    console.log(&#39;i3==>&#39;,i3);
    setTimeout(function(){      console.log(&#39;i==>&#39;,i);      console.log(&#39;i2==>&#39;,i2);      console.log(&#39;i3==>&#39;,i3);
      value1 +=i;
      value2 +=i2;
      value3 +=i3;
    },1);
  })();
}

setTimeout(function(){  console.log(value1,value2,value3);
},100)
//输出结果i2==> 1i3==> 1i2==> 2i3==> 2i==> 3i2==> 2i3==> 1i==> 3i2==> 2i3==> 26 4 3

解释:

1.匿名自执行函数的几种语法
(function () { /* code */ } ()); // 推荐(function () { /* code */ })(); 
~function () { /* code */ }(); 
+function () { /* code */ }(); 
!function () { /* code */ }(); 
void function () { /* code */ }();
2.利用自执行函数和闭包来保存某个特殊状态中的值
(function(){//自执行函数
    var i3 = i;    console.log(&#39;i3==>&#39;,i3);
    setTimeout(function(){//闭包
      console.log(&#39;i==>&#39;,i);      console.log(&#39;i2==>&#39;,i2);      console.log(&#39;i3==>&#39;,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(&#39;i===>&#39;,i);
  },100);
}//输出12i===> 3i===> 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





相关推荐:

详解JavaScript自执行函数和jQuery扩展方法

JavaScript自执行函数和jQuery扩展方法

js函数中的自执行函数

以上是js匿名自执行函数实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn