我們經常會看到這樣的寫法: 這就是一個簡單的IIFE(立即執行函數表達式,immediately invoked function expression)了。 這樣的寫法有什麼好處呢?來簡單分析一下。 1. 開頭的分號 我們都知道,js是可以加分號或者不加分號的,在某些情況下,不加分號會讓解析器解析 ...
我們經常會看到這樣的寫法:
;(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;
}
};
})()