1. 程式人生 > >JS中的立即執行函數

JS中的立即執行函數

作用 new spa 試題 一個 作用域 報錯 無法訪問 ++

JS 立即執行函數可以讓函數在創建後立即執行,這種模式本質上就是函數表達式(命名的或者匿名的),在創建後立即執行。

1、立即執行函數的寫法

立即執行函數通常有下面兩種寫法:

(function(){ 
   ...
})();

(function(){ 
    ...
}());

//錯誤的寫法
function (){ 
    ... 
}();    //報錯: Uncaught SyntaxError: Unexpected token (

第三種寫法報錯的原因是,Javascript引擎看到function關鍵字之後,認為後面跟的是函數定義語句,不應該以圓括號結尾。以圓括號開頭,引擎就會認為後面跟的是一個表示式,而不是函數定義,所以就避免了錯誤。

讓Javascript引擎認為這是一個表達式的方法還有很多:

!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有傳遞參數時,才需要最後那個圓括號
 

2、立即執行函數的作用

立即執行函數只有一個作用:創建一個獨立的作用域。這個作用域裏面的變量,外面訪問不到(即避免了「變量汙染」)。

面試題:

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 } }

因為輸出的 i 是全局作用域的,當循環結束後 i 的值是 6,所以輸出的 i 就是6。

用立即執行函數給每個 li 創造一個獨立作用域即可,此時 i 無法被循環改變,因為 i 是在獨立的作用域裏,外面無法訪問到。

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) }

JS中的立即執行函數