根據一段代碼淺談Javascript閉包

2019-11-21 00:02:37

字體：大中小

來源：轉載

供稿：網友

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

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

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

復制代碼代碼如下:

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

js中各個變量以function為單元進行封裝，當在function內部找不到某一變量時，function會向其所在的上一單元（上下文）中進行查找，一直查找到頂層的window域。
這時就出現一個疑問：這個查找過程是以函數引用位置為起點還是函數體定義的位置為起點？
在上面這一段代碼中，result所在域是window，但是實際的輸出結果是f1內部的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); }; 
} 

那么根據我們對result的分析，nAdd的執行將影響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(); 

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

再看這種情況：

復制代碼代碼如下:

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

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

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

改寫一下函數的調用部分：

復制代碼代碼如下:

 
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。

上一篇：JavaScript學習筆記之獲取當前目錄的實現代碼

下一篇：js保存當前路徑(cookies記錄)