(轉) 什么是立即執行函數？有什么作用？

作者：方應杭
鏈接：https://zhuanlan.zhihu.com/p/22465092
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

這是 JS 中的一個常見概念，面試時經常會被問到，請「用自己的語言」簡述

1. 立即執行函數是什么
2. 立即執行函數有什么用途

 

-------------------------------------------

回答：

1. 立即執行函數是什么

立即執行函數就是

1. 聲明一個匿名函數
2. 馬上調用這個匿名函數

 

上面是一個典型的立即執行函數。

• 首先聲明一個匿名函數 function(){alert('我是匿名函數')}。
• 然后在匿名函數后面接一對括號 ()，調用這個匿名函數。

 

那么為什么還要用另一對括號把匿名函數包起來呢？

其實是為了兼容 JS 的語法。

如果我們不加另一對括號，直接寫成

function(){alert('我是匿名函數')}()

瀏覽器會報語法錯誤。想要通過瀏覽器的語法檢查，必須加點小東西，比如下面幾種

(function(){alert('我是匿名函數')} ()) // 用括號把整個表達式包起來
(function(){alert('我是匿名函數')}) () //用括號把函數包起來
!function(){alert('我是匿名函數')}() // 求反，我們不在意值是多少，只想通過語法檢查。
+function(){alert('我是匿名函數')}()
-function(){alert('我是匿名函數')}()
~function(){alert('我是匿名函數')}()
void function(){alert('我是匿名函數')}()
new function(){alert('我是匿名函數')}()

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

為什么 alert 的總是 6 呢，因為 i 是貫穿整個作用域的，而不是給每個 li 分配了一個 i，如下：

那么怎么解決這個問題呢？用立即執行函數給每個 li 創造一個獨立作用域即可（當然還有其他辦法）：

var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  !function(ii){
    liList[ii].onclick = function(){
      alert(ii) // 0、1、2、3、4、5
    }
  }(i)
}

在立即執行函數執行的時候，i 的值被賦值給 ii，此后 ii 的值一直不變。

i 的值從 0 變化到 5，對應 6 個立即執行函數，這 6 個立即執行函數里面的 ii 「分別」是 0、1、2、3、4、5。

以上，就是立即執行函數的基本概念。

完。