根據(jù)一段代碼淺談Javascript閉包

更新時間：2010年12月14日 21:42:45 作者：

水平不高，不能也不想從太深的層次去講解這個東西，只是根據(jù)一段比較有代表性的代碼，結合執(zhí)行結果，從表象上粗淺地談談。

 
function f1(){ 
var n = 999; 
nAdd = function(){ n += 1; } 
function f2(){ 
alert(n); 
} 
return f2; 
} 

這里的閉包是f1，封閉了一個變量n和一個函數(shù)f2。

我們先無視nAdd，盡量保持原貌重寫一下這個函數(shù)。

復制代碼代碼如下:

 
function f1(){ 
var n = 999; 
var f2 = function(){ alert(n); }; 
return f2; 
} 
var result = f1(); 
result(); 

js中各個變量以function為單元進行封裝，當在function內部找不到某一變量時，function會向其所在的上一單元（上下文）中進行查找，一直查找到頂層的window域。
這時就出現(xiàn)一個疑問：這個查找過程是以函數(shù)引用位置為起點還是函數(shù)體定義的位置為起點？
在上面這一段代碼中，result所在域是window，但是實際的輸出結果是f1內部的n值，所以可以得出結論：變量查找的起點是函數(shù)體定義的位置。

現(xiàn)在再回過頭來看nAdd（第一段代碼）。如我們所知，沒有關鍵字var定義的變量默認進入window域，所以nAdd實際為window.nAdd。這就等同于如下代碼：

復制代碼代碼如下:

 
var nAdd; 
function f1(){ 
var n = 999; 
nAdd = function(){ n += 1; } 
function f2(){ 
alert(n); 
} 
return function(){ alert(n); }; 
} 

那么根據(jù)我們對result的分析，nAdd的執(zhí)行將影響f1中n的值。
所以有：

復制代碼代碼如下:

 
function f1(){ 
var n = 999; 
nAdd = function(){ n += 1; } 
function f2(){ 
alert(n); 
} 
return function(){ alert(n); }; 
} 
var result = f1(); 
result(); 
nAdd(); 
result(); 

這段代碼執(zhí)行最終的輸出結果為1000。

再看這種情況：

復制代碼代碼如下:

 
function f1(){ 
var n = 999; 
nAdd = function(){ n += 1; } 
function f2(){ 
alert(n); 
} 
return function(){ alert(n); }; 
} 

f1()(); //<--p1 
nAdd(); 
f1()(); //<--p2 

簡述一下執(zhí)行過程：
p1位置，f1封裝了一個匿名的閉包A，在返回A閉包中的函數(shù)A:f2后繼而執(zhí)行A:f2，A:f2輸出變量A:n，結果是999。
與此同時，nAdd被賦值為A閉包中的一個函數(shù)，下一行執(zhí)行nAdd即讓A:n的值+1。
p2位置，f1封裝匿名的閉包B，所進行的操作都是針對閉包B的，隨后執(zhí)行B:f2輸出的是B:n，所以最后的結果依然是999。
A和B是兩個獨立的“包”，互不影響。

改寫一下函數(shù)的調用部分：

復制代碼代碼如下:

 
function f1(){ 
var n = 999; 
nAdd = function(){ n += 1; } 
function f2(){ 
alert(n); 
} 
return function(){ alert(n); }; 
} 

var result = f1(); 
result(); 
nAdd(); 
f1()(); 
result(); // <--p3 

p3位置不意外地輸出了1000。

您可能感興趣的文章: