快捷導(dǎo)航

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

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

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

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

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

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

復(fù)制代碼代碼如下:

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

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

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

復(fù)制代碼代碼如下:

 
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的值。
所以有：

復(fù)制代碼代碼如下:

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

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

再看這種情況：

復(fù)制代碼代碼如下:

 
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封裝了一個(gè)匿名的閉包A，在返回A閉包中的函數(shù)A:f2后繼而執(zhí)行A:f2，A:f2輸出變量A:n，結(jié)果是999。
與此同時(shí)，nAdd被賦值為A閉包中的一個(gè)函數(shù)，下一行執(zhí)行nAdd即讓A:n的值+1。
p2位置，f1封裝匿名的閉包B，所進(jìn)行的操作都是針對閉包B的，隨后執(zhí)行B:f2輸出的是B:n，所以最后的結(jié)果依然是999。
A和B是兩個(gè)獨(dú)立的“包”，互不影響。

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

復(fù)制代碼代碼如下:

 
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。

您可能感興趣的文章: