深入理解閉包系列第三篇——IIFE

小火柴的藍色理想發表於2016-08-03

前面的話

　　嚴格來講，IIFE並不是閉包，因為它並不滿足函式成為閉包的三個條件。但一般地，人們認為IIFE就是閉包，畢竟閉包有多個定義。本文將詳細介紹IIFE的實現和用途

 

實現

　　函式跟隨一對圓括號()表示函式呼叫

//函式宣告語句寫法
function test(){};
test();

//函式表示式寫法
var test = function(){};
test();

　　但有時需要在定義函式之後，立即呼叫該函式。這種函式就叫做立即執行函式，全稱為立即呼叫的函式表示式IIFE(Imdiately Invoked Function Expression)

　　[注意]javascript引擎規定，如果function關鍵字出現在行首，一律解釋成函式宣告語句

　　【1】函式宣告語句需要一個函式名，由於沒有函式名，所以報錯

//SyntaxError: Unexpected token (
function(){}();

　　【2】函式宣告語句後面加上一對圓括號，只是函式宣告語句與分組操作符的組合而已。由於分組操作符不能為空，所以報錯

//SyntaxError: Unexpected token )
function foo(){}();

//等價於
function foo(){};
();//SyntaxError: Unexpected token )

　　【3】函式宣告語句加上一對有值的圓括號，也僅僅是函式宣告語句與不報錯的分組操作符的組合而已

function foo(){}(1);

//等價於
function foo(){};
(1);

　　所以，解決方法就是不要讓function出現在行首，讓引擎將其理解成一個表示式

最常用的兩種辦法

(function(){ /* code */ }()); 
(function(){ /* code */ })();

其他寫法

var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();

new function(){ /* code */ };
new function(){ /* code */ }();

 

作用域

　　對於IIFE來說，通過作用域鏈來查詢變數與普通函式有一些不同的地方

【with】

　　with語句中的IIFE會先在with語句中查詢，然後再向上查詢。在下列程式碼中，標準瀏覽器下f()函式和IIFE都返回'bar'，但IE10-瀏覽器中的f()函式返回'abc'

var foo = "abc";
with({
    foo:"bar"
}){
    function f(){
        console.log(foo);
    };
    (function(){
        console.log(foo);
    })();
    f();
}

【try-catch】

　　在下列程式碼中，標準瀏覽器下f()函式和IIFE都返回'error'，但IE10-瀏覽器中的f()函式返回'10'

try{
    var e = 10;
    throw new Error();
}catch(e){
    function f(){
        console.log(e);
    }
    (function (){
        console.log(e);
    })();
    f();
}

【具名函式表示式】

　　在下列程式碼中，標準瀏覽器下a()函式返回1，而IIFE返回a函式程式碼；但IE8-瀏覽器中，二者都返回1

function a(){
    a = 1;
    console.log(a);
};
a();
(function a(){
    a = 1;
    console.log(a);
})();

 

用途

　　IIFE一般用於構造私有變數，避免全域性空間汙染

　　接下來用一個需求實現來更直觀地說明IIFE的用途。假設有一個需求，每次呼叫函式，都返回加1的一個數字(數字初始值為0)

【1】全域性變數

　　一般情況下，我們會使用全域性變數來儲存該數字狀態

var a = 0;
function add(){
    return ++a;
}
console.log(add());//1
console.log(add());//2

【2】自定義屬性

　　但上面的方法中，變數a實際上只和add函式相關，卻宣告為全域性變數，不太合適。

　　將變數a更改為函式的自定義屬性更為恰當

function add(){
    return ++add.count;
}
add.count = 0;
console.log(add());//1
console.log(add());//2

【3】IIFE

　　其實這樣做，還是有問題。有些程式碼可能會無意中將add.count重置

　　使用IIFE把計數器變數儲存為私有變數更安全，同時也可以減少對全域性空間的汙染

var add = (function(){
    var counter = 0;
    return function(){
        return ++counter; 
    }
})();
console.log(add())//1
console.log(add())//2

 

注意事項

　　執行如下程式碼會報錯，提示此時的a是undefined

var a = function(){
    return 1;
}
(function(){
    console.log(a());//報錯
})();

　　這是因為沒有加分號，瀏覽器將上面程式碼解釋成如下所示

var a = function(){
    return 1;
}(function(){
    console.log(a());//報錯
})();

　　如果加上分號，就不會出錯了

var a = function(){
    return 1;
};
(function(){
    console.log(a());//1
})();

 

相關文章