什麼是 IIFE ？

IIFE

IIFE（Immediately Invoked Function Expression）即立即被調用的函數表達式，是一個在定義時就會立即執行的JS函數。它可以建立一塊單獨的作用域，防止污染全局作用域。

(function () {
    xxxxx
})();
           

IIFE主要包含兩部分。前面的

()

 包含的部分是一個函數表達式，後面的

()

表示執行這個函數。

IIFE有什麼用？

IIFE 可以建立一個獨立的塊級作用域，避免變量被外界通路，防止污染全局作用域。

var a = '張三';
(function IIFE(){
    var a = '法外狂徒';
    console.log( a ); // 法外狂徒
})();

console.log( a ); // 張三
           

ps: IIFE的名稱不是固定的，它可以使任意的，甚至可以沒有成為一個匿名函數。

IIFE的其他形式

當然，也有一些人會這麼用：

var a = '張三';
(function IIFE(){
    var a = '法外狂徒';
    console.log( a ); // 法外狂徒
}());

console.log( a ); // 張三
           

就是将用于調用的 

()

 被移動到用于包裝的 

( )

 内部，這麼做也是允許的。

IIFE 還有另一種變種，就是将要被執行的函數，在調用和傳參之後給出。這種模式更幹淨和易懂一些，雖然有點兒繁冗。

var a = 2;

(function IIFE( def ){
    def( window );
})(function def( global ){

    var a = 3;
    console.log( a ); // 3
    console.log( global.a ); // 2

});
           

def

 函數表達式在後半部分被定義，然後作為一個參數（也叫 

def

）被傳遞給在代碼段前半部分定義的 

IIFE

 函數。最後，參數 

def

（函數）被調用，并将 

window

 作為 

global

 參數傳入。

IIFE接收參數

var a = '張三';
    (function IIFE(val){
       console.log(val); // 張三
    })(a);
           

for (var i=1; i<=5; i++) {
        (function(i){
            setTimeout( function timer(){
                console.log( i ); 
            }, i*1000 );
        })( i );
    }

   //輸出 1 2 3 4 5