前面的話
嚴格來講，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 })();
文章列表
留言列表
