IIFE(立即執行函數表達式)
我們經常會看到這樣的寫法:
;(fuction () {
// do something
})()
這就是一個簡單的IIFE(立即執行函數表達式,immediately-invoked function expression)了。
這樣的寫法有什麽好處呢?來簡單分析一下。
1. 開頭的分號
我們都知道,js是可以加分號或者不加分號的,在某些情況下,不加分號會讓解析器解析出錯,舉個例子:
var
a = 0
, b = 0
;
a = b + 3
(b = a)
// Uncaught TypeError: 3 is not a function
解析代碼的時候,a = b + 3和(b = a)這兩條語句之間沒有明確的分界,回車和空格會自動被忽略。解析器會認為這是一句。所以,此時會認為3是一個函數,b=a是他的參數。
在知乎的這個問題下,尤大做了解釋。
真正會導致上下行解析出問題的 token 有 5 個:括號,方括號,正則開頭的斜杠,加號,減號。我還從沒見過實際代碼中用正則、加號、減號作為行首的情況,所以總結下來就是一句話:一行開頭是括號或者方括號的時候加上分號就可以了,其他時候全部不需要。其實即使是這兩種情況,在實際代碼中也頗為少見。
ok,回到我們的例子,我們的例子就是以括號開頭的,如果上一個語句沒有加分號,很可能會出現這樣問題,這個分號就是為了防止這樣的情況發生,稱之為防禦性分號。
2. function(){}
函數有兩種聲明方式:
function foo () {}
var foo = function () {}
這兩種聲明方式的不同之處在於,使用var聲明的函數不會自動提升到頂部。也就是說,不能在var聲明函數的語句之前調用函數,否則會拋出undefined的錯誤。
function () {}這種形式被稱為匿名函數。匿名函數沒有名字,也就是沒有指針,是無法在其他地方調用的。
將匿名函數賦值給foo,則可以通過foo來調用。
當然還有辦法調用它,就是例子中的兩對括號。第一對括號將匿名函數包裝成了一個表達式,而第二對括號意思就是立即執行它。
function () {console.log(‘a‘)} // 報錯 Uncaught SyntaxError: Unexpected token (
(function () {console.log(‘a‘)}) // 返回函數定義 ? () {console.log(‘a‘)},沒有log
(function () {console.log(‘a‘)})() // a
function foo() {console.log(‘a‘)}() // 報錯 Uncaught SyntaxError: Unexpected token )
第一行,因為不是合法的聲明方式,希望找到函數名的地方是‘(’,所以拋出了該異常。
第二行,()中的語句被當成了表達式,解析器會認為是var聲明的方式。
第三行,自執行。
第四行,function foo() {console.log(‘a‘)}是正確的函數聲明方式,被正確解析。接下來的一對括號依次解析,括號裏需要有表達式,但是沒有,所以會拋出這樣的異常。
3. 好處
IIFE的好處就是不會汙染全局變量,就在當前的函數體的作用域下進行操作,保證了父作用域的幹凈,如果return出一些函數,那這些函數就形成了閉包。
我們常用IIFE來寫module。
var counter = (function(){
var i = 0;
return {
get: function(){
return i;
},
set: function( val ){
i = val;
},
increment: function() {
return ++i;
}
};
})()
Refer:
- 維基百科:立即調用函數表達式
- 知乎:JavaScript 語句後應該加分號麽?
IIFE(立即執行函數表達式)