Rumah > hujung hadapan web > tutorial js > js匿名自执行函数实例详解

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

小云云
Lepaskan: 2018-03-19 17:28:12
asal
2013 orang telah melayarinya

匿名自执行函数:没有方法名的函数,闭包:闭包是指有权访问另一个函数作用域变量的函数;本文主要和大家分享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)
Salin selepas log masuk
//输出结果i2==> 1i3==> 1i2==> 2i3==> 2i==> 3i2==> 2i3==> 1i==> 3i2==> 2i3==> 26 4 3
Salin selepas log masuk

解释:

1.匿名自执行函数的几种语法
(function () { /* code */ } ()); // 推荐(function () { /* code */ })(); 
~function () { /* code */ }(); 
+function () { /* code */ }(); 
!function () { /* code */ }(); 
void function () { /* code */ }();
Salin selepas log masuk
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);
  })();
Salin selepas log masuk

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

3.for循环语法理解
for (语句 1; 语句 2; 语句 3) {
 ...
}
Salin selepas log masuk

语句 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
Salin selepas log masuk

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函数中的自执行函数

Atas ialah kandungan terperinci js匿名自执行函数实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan