js匿名自執行函數實例詳解

匿名自執行函數：沒有方法名稱的函數，閉包：閉包是指有權存取另一個函數作用域變數的函數；本文主要和大家分享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('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(&#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中文網其他相關文章！