實現

函數跟隨一對圓括號()表示函數調用

<code>//函數聲明語句寫法
function test(){};
test();

//函數表達式寫法
var test = function(){};
test();/<code>

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

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

函數聲明語句需要一個函數名，由於沒有函數名，所以報錯

<code>//SyntaxError: Unexpected token (
function(){}();/<code>

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

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

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

函數聲明語句加上一對有值的圓括號，也僅僅是函數聲明語句與不報錯的分組操作符的組合而已

<code>function foo(){}(1);

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

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

最常用的兩種辦法

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

其他寫法

<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 */ }();/<code>

作用域

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

with

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

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

try-catch

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

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

具名函數表達式

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

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

})();/<code>

用途

IIFE一般用於構造私有變量，避免全局空間汙染

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

全局變量

一般情況下，我們會使用全局變量來保存該數字狀態

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

自定義屬性

但上面的方法中，變量a實際上只和add函數相關，卻聲明為全局變量，不太合適。

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

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

IIFE

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

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

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

注意事項

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

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

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

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

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

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

閱讀更多 澤澤vlog 的文章

關鍵字: 瀏覽器 在行 JavaScript