閉包（closure）是Javascript語(yǔ)言的一個(gè)難點(diǎn)，也是它的特色，很多高級(jí)應(yīng)用都要依靠閉包實(shí)現(xiàn)锐朴。

一或舞、變量的作用域

要理解閉包荆姆，首先必須理解JavaScript特殊的變量作用域。
變量的作用域無(wú)非就是兩種：全局變量和局部變量映凳。
Javascript語(yǔ)言的特殊之處胆筒，就在于函數(shù)內(nèi)部可以直接讀取全局變量。

var n=999;
function f1(){　　　　
  alert(n);　　
}
f1(); // 999

另一方面诈豌，在函數(shù)外部自然無(wú)法讀取函數(shù)內(nèi)的局部變量仆救。

function f1(){　　　　
  var n=999;　　
}
alert(n); // error

注意：函數(shù)內(nèi)部聲明變量的時(shí)候，一定要使用var命令矫渔。如果不用的話派桩，你實(shí)際上聲明了一個(gè)全局變量！

function f1(){　　　　
  n=999;　　
}
f1();
alert(n); // 999

二蚌斩、如何從外部讀取局部變量铆惑？

出于種種原因范嘱，我們有時(shí)候需要得到函數(shù)內(nèi)的局部變量。但是员魏，前面已經(jīng)說(shuō)過(guò)了丑蛤，正常情況下，這是辦不到的撕阎，只有通過(guò)變通方法才能實(shí)現(xiàn)受裹。

那就是在函數(shù)的內(nèi)部，再定義一個(gè)函數(shù)虏束。

function f1(){
　　n=999;
　　function f2(){
　　　　alert(n); // 999
　　}
}

在上面的代碼中棉饶，函數(shù)f2就被包括在函數(shù)f1內(nèi)部，這時(shí)f1內(nèi)部的所有局部變量镇匀，對(duì)f2都是可見(jiàn)的照藻。但是反過(guò)來(lái)就不行，f2內(nèi)部的局部變量汗侵，對(duì)f1 就是不可見(jiàn)的幸缕。這就是Javascript語(yǔ)言特有的“鏈?zhǔn)阶饔糜颉苯Y(jié)構(gòu)（chain scope），

子對(duì)象會(huì)一級(jí)一級(jí)地向上尋找所有父對(duì)象的變量晰韵。所以发乔，父對(duì)象的所有變量，對(duì)子對(duì)象都是可見(jiàn)的雪猪，反之則不成立栏尚。

既然f2可以讀取f1中的局部變量，那么只要把f2作為返回值只恨，我們不就可以在f1外部讀取它的內(nèi)部變量了嗎译仗！

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

三、閉包的概念

上一節(jié)代碼中的f2函數(shù)坤次，就是閉包。

各種專業(yè)文獻(xiàn)上的“閉包”（closure）定義非常抽象斥赋，很難看懂缰猴。我的理解是，閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)疤剑。

由于在Javascript語(yǔ)言中滑绒，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡(jiǎn)單理解成“定義在一個(gè)函數(shù)內(nèi)部的函數(shù)”隘膘。

所以疑故，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的一座橋梁弯菊。

四纵势、閉包的用途

閉包可以用在許多地方。它的最大用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量钦铁，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中软舌。

怎么來(lái)理解這句話呢？請(qǐng)看下面的代碼牛曹。

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

在這段代碼中佛点，result實(shí)際上就是閉包f2函數(shù)。它一共運(yùn)行了兩次黎比，第一次的值是999超营，第二次的值是1000。這證明了阅虫，函數(shù)f1中的局部變量n一直保存在內(nèi)存中演闭，并沒(méi)有在f1調(diào)用后被自動(dòng)清除。

為什么會(huì)這樣呢书妻？原因就在于f1是f2的父函數(shù)船响，而f2被賦給了一個(gè)全局變量，這導(dǎo)致f2始終在內(nèi)存中躲履，而f2的存在依賴于f1见间，因此f1也始終在內(nèi)存中，不會(huì)在調(diào)用結(jié)束后工猜，被垃圾回收機(jī)制（garbage collection）回收米诉。

垃圾回收機(jī)制：在Javascript中，如果一個(gè)對(duì)象不再被引用篷帅，那么這個(gè)對(duì)象就會(huì)被GC回收史侣。如果兩個(gè)對(duì)象互相引用，而不再被第3者所引用魏身，那么這兩個(gè)互相引用的對(duì)象也會(huì)被回收惊橱。因?yàn)楹瘮?shù)a被b引用，b又被a外的c引用箭昵，這就是為什么函數(shù)a執(zhí)行后不會(huì)被回收的原因税朴。

這段代碼中另一個(gè)值得注意的地方，就是“nAdd=function(){n+=1}”這一行家制，首先在nAdd前面沒(méi)有使用var關(guān)鍵字正林，因此 nAdd是一個(gè)全局變量，而不是局部變量颤殴。其次觅廓，nAdd的值是一個(gè)匿名函數(shù)（anonymous function），而這個(gè)

匿名函數(shù)本身也是一個(gè)閉包涵但，所以nAdd相當(dāng)于是一個(gè)setter杈绸，可以在函數(shù)外部對(duì)函數(shù)內(nèi)部的局部變量進(jìn)行操作帖蔓。

五、使用閉包的注意點(diǎn)

1）由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中蝇棉，內(nèi)存消耗很大讨阻，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁(yè)的性能問(wèn)題篡殷，在IE中可能導(dǎo)致內(nèi)存泄露钝吮。
解決方法：在退出函數(shù)之前，將不使用的局部變量全部刪除板辽。

2）閉包會(huì)在父函數(shù)外部奇瘦，改變父函數(shù)內(nèi)部變量的值。所以劲弦，如果你把父函數(shù)當(dāng)作對(duì)象（object）使用耳标，把閉包當(dāng)作它的公用方法（Public Method），把內(nèi)部變量當(dāng)作它的私有屬性（private value）邑跪，這時(shí)一定要小心次坡，不要隨便改變父函數(shù)內(nèi)部變量的值

六、思考題

如果你能理解下面代碼的運(yùn)行結(jié)果画畅，應(yīng)該就算理解閉包的運(yùn)行機(jī)制了砸琅。

　　var name = "The Window";   
　　var object = {   
　　　　name : "My Object",   
　　　　getNameFunc : function(){   
　　　　　　return function(){   
　　　　　　　　return this.name;   
　　　　　};   
　　　　}   
};   
alert(object.getNameFunc()());  //The Window

JavaScript閉包例子

function outerFun()
 {
  var a=0;
  function innerFun()
  {
   a++;
   alert(a);
  }    
 }
innerFun()

上面的代碼是錯(cuò)誤的.innerFun()的作用域在outerFun()內(nèi)部,所在outerFun()外部調(diào)用它是錯(cuò)誤的.

改成如下,也就是閉包

function outerFun()
{
 var a=0;
 function innerFun()
 {
  a++;
  alert(a);
 }
 return innerFun;  //注意這里
}
var obj=outerFun();
obj();  //結(jié)果為1
obj();  //結(jié)果為2
var obj2=outerFun();
obj2();  //結(jié)果為1
obj2();  //結(jié)果為2

什么是閉包：

當(dāng)內(nèi)部函數(shù) 在定義它的作用域 的外部 被引用時(shí),就創(chuàng)建了該內(nèi)部函數(shù)的閉包 ,如果內(nèi)部函數(shù)引用了位于外部函數(shù)的變量,當(dāng)外部函數(shù)調(diào)用完畢后,這些變量在內(nèi)存不會(huì)被 釋放,因?yàn)殚]包需要它們.

再來(lái)看一個(gè)例子

function outerFun()
{
 var a =0;
 alert(a);  
}
var a=4;
outerFun();
alert(a);

結(jié)果是 0,4 . 因?yàn)樵诤瘮?shù)內(nèi)部使用了var關(guān)鍵字 維護(hù)a的作用域在outFun()內(nèi)部.

再看下面的代碼:

function outerFun()
{
 //沒(méi)有var 
 a =0;
 alert(a);  
}
var a=4;
outerFun();
alert(a);

結(jié)果為 0,0 真是奇怪,為什么呢?

作用域鏈?zhǔn)敲枋鲆环N路徑的術(shù)語(yǔ),沿著該路徑可以確定變量的值 .當(dāng)執(zhí)行a=0時(shí),因?yàn)闆](méi)有使用var關(guān)鍵字,因此賦值操作會(huì)沿著作用域鏈到var a=4; 并改變其值.

如果你對(duì)javascript閉包還不是很理解，那么請(qǐng)看下面轉(zhuǎn)載的文章：(轉(zhuǎn)載:http://www.felixwoo.com/archives/247)

一轴踱、什么是閉包症脂？

官方”的解釋是：閉包是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分淫僻。
相信很少有人能直接看懂這句話诱篷，因?yàn)樗枋龅奶珜W(xué)術(shù)。其實(shí)這句話通俗的來(lái)說(shuō)就是：JavaScript中所有的function都是一個(gè)閉包雳灵。不過(guò)一般來(lái)說(shuō)棕所，嵌套的function所產(chǎn)生的閉包更為強(qiáng)大，也是大部分時(shí)候我們所謂的“閉包”悯辙×帐。看下面這段代碼：

function a(){  
 var i = 0;
 function b(){
   alert(++i); 
 }  
 return b;  
}  
var c = a();  
c();

這段代碼有兩個(gè)特點(diǎn)：
1.函數(shù)b嵌套在函數(shù)a內(nèi)部；
2.函數(shù)a返回函數(shù)b

引用關(guān)系如圖：

Paste_Image.png

這樣在執(zhí)行完var c=a()后笑撞，變量c實(shí)際上是指向了函數(shù)b岛啸，再執(zhí)行c()后就會(huì)彈出一個(gè)窗口顯示i的值(第一次為1)钓觉。這段代碼其實(shí)就創(chuàng)建了一個(gè)閉包茴肥，為什么？因?yàn)楹瘮?shù)a外的變量c引用了函數(shù)a內(nèi)的函數(shù)b荡灾，就是說(shuō)：

當(dāng)函數(shù)a的內(nèi)部函數(shù)b被函數(shù)a外的一個(gè)變量引用的時(shí)候瓤狐，就創(chuàng)建了一個(gè)閉包瞬铸。

讓我們說(shuō)的更透徹一些。所謂“閉包”础锐，就是在構(gòu)造函數(shù)體內(nèi)定義另外的函數(shù)作為目標(biāo)對(duì)象的方法函數(shù)嗓节，而這個(gè)對(duì)象的方法函數(shù)反過(guò)來(lái)引用外層函數(shù)體中的臨時(shí)變量。這使得只要目標(biāo) 對(duì)象在生存期內(nèi)始終能保持其方法皆警，就能間接保持原構(gòu)造函數(shù)體當(dāng)時(shí)用到的臨時(shí)變量值拦宣。盡管最開(kāi)始的構(gòu)造函數(shù)調(diào)用已經(jīng)結(jié)束，臨時(shí)變量的名稱也都消失了信姓，但在目 標(biāo)對(duì)象的方法內(nèi)卻始終能引用到該變量的值鸵隧，而且該值只能通這種方法來(lái)訪問(wèn)。即使再次調(diào)用相同的構(gòu)造函數(shù)意推，但只會(huì)生成新對(duì)象和方法豆瘫，新的臨時(shí)變量只是對(duì)應(yīng)新 的值，和上次那次調(diào)用的是各自獨(dú)立的菊值。

二外驱、閉包有什么作用？

簡(jiǎn)而言之腻窒，閉包的作用就是在a執(zhí)行完并返回后昵宇，閉包使得Javascript的垃圾回收機(jī)制GC不會(huì)收回a所占用的資源，因?yàn)閍的內(nèi)部函數(shù)b的執(zhí)行需要依賴a中的變量定页。這是對(duì)閉包作用的非常直白的描述趟薄，不專業(yè)也不嚴(yán)謹(jǐn)，但大概意思就是這樣典徊，理解閉包需要循序漸進(jìn)的過(guò)程杭煎。

在上面的例子中，由于閉包的存在使得函數(shù)a返回后卒落，a中的i始終存在羡铲，這樣每次執(zhí)行c()，i都是自加1后alert出i的值儡毕。

那 么我們來(lái)想象另一種情況也切，如果a返回的不是函數(shù)b，情況就完全不同了腰湾。因?yàn)閍執(zhí)行完后雷恃，b沒(méi)有被返回給a的外界，只是被a所引用费坊，而此時(shí)a也只會(huì)被b引 用倒槐，因此函數(shù)a和b互相引用但又不被外界打擾(被外界引用)，函數(shù)a和b就會(huì)被GC回收附井。(關(guān)于Javascript的垃圾回收機(jī)制將在后面詳細(xì)介紹)

三讨越、閉包內(nèi)的微觀世界

如果要更加深入的了解閉包以及函數(shù)a和嵌套函數(shù)b的關(guān)系两残，我們需要引入另外幾個(gè)概念：函數(shù)的執(zhí)行環(huán)境(excution context)、活動(dòng)對(duì)象(call object)把跨、作用域(scope)人弓、作用域鏈(scope chain)。以函數(shù)a從定義到執(zhí)行的過(guò)程為例闡述這幾個(gè)概念着逐。

1.當(dāng)定義函數(shù)a的時(shí)候崔赌，js解釋器會(huì)將函數(shù)a的作用域鏈(scope chain)設(shè)置為定義a時(shí)a所在的“環(huán)境”，如果a是一個(gè)全局函數(shù)耸别，則scope chain中只有window對(duì)象峰鄙。

2.當(dāng)執(zhí)行函數(shù)a的時(shí)候，a會(huì)進(jìn)入相應(yīng)的執(zhí)行環(huán)境(excution context)太雨。

3.在創(chuàng)建執(zhí)行環(huán)境的過(guò)程中吟榴，首先會(huì)為a添加一個(gè)scope屬性，即a的作用域囊扳，其值就為第1步中的scope chain吩翻。即a.scope=a的作用域鏈。

4.然后執(zhí)行環(huán)境會(huì)創(chuàng)建一個(gè)活動(dòng)對(duì)象(call object)锥咸∠料梗活動(dòng)對(duì)象也是一個(gè)擁有屬性的對(duì)象，但它不具有原型而且不能通過(guò)JavaScript代碼直接訪問(wèn)搏予。創(chuàng)建完活動(dòng)對(duì)象后熊锭，把活動(dòng)對(duì)象添加到a的作用域鏈的最頂端。此時(shí)a的作用域鏈包含了兩個(gè)對(duì)象：a的活動(dòng)對(duì)象和window對(duì)象雪侥。

5.下一步是在活動(dòng)對(duì)象上添加一個(gè)arguments屬性碗殷，它保存著調(diào)用函數(shù)a時(shí)所傳遞的參數(shù)。

6.最后把所有函數(shù)a的形參和內(nèi)部的函數(shù)b的引用也添加到a的活動(dòng)對(duì)象上速缨。在這一步中锌妻，完成了函數(shù)b的的定義，因此如同第3步旬牲，函數(shù)b的作用域鏈被設(shè)置為b所被定義的環(huán)境仿粹，即a的作用域。

到此原茅，整個(gè)函數(shù)a從定義到執(zhí)行的步驟就完成了吭历。此時(shí)a返回函數(shù)b的引用給c，又函數(shù)b的作用域鏈包含了對(duì)函數(shù)a的活動(dòng)對(duì)象的引用擂橘，也就是說(shuō)b可以訪問(wèn)到a中定義的所有變量和函數(shù)晌区。函數(shù)b被c引用，函數(shù)b又依賴函數(shù)a，因此函數(shù)a在返回后不會(huì)被GC回收契讲。

當(dāng)函數(shù)b執(zhí)行的時(shí)候亦會(huì)像以上步驟一樣。因此滑频，執(zhí)行時(shí)b的作用域鏈包含了3個(gè)對(duì)象：b的活動(dòng)對(duì)象捡偏、a的活動(dòng)對(duì)象和window對(duì)象，如下圖所示：

Paste_Image.png

如圖所示峡迷，當(dāng)在函數(shù)b中訪問(wèn)一個(gè)變量的時(shí)候银伟，搜索順序是：
1.先搜索自身的活動(dòng)對(duì)象，如果存在則返回绘搞，如果不存在將繼續(xù)搜索函數(shù)a的活動(dòng)對(duì)象彤避，依次查找，直到找到為止夯辖。
2.如果函數(shù)b存在prototype原型對(duì)象琉预，則在查找完自身的活動(dòng)對(duì)象后先查找自身的原型對(duì)象，再繼續(xù)查找蒿褂。這就是Javascript中的變量查找機(jī)制圆米。
3.如果整個(gè)作用域鏈上都無(wú)法找到，則返回undefined啄栓。

小結(jié)娄帖，本段中提到了兩個(gè)重要的詞語(yǔ)：函數(shù)的定義與執(zhí)行。文中提到函數(shù)的作用域是在定義函數(shù)時(shí)候就已經(jīng)確定昙楚，而不是在執(zhí)行的時(shí)候確定（參看步驟1和3）近速。用一段代碼來(lái)說(shuō)明這個(gè)問(wèn)題：

function f() {
  var g = function () { 
    return x; 
  }  
  return g;  
}  
var h = f(1);  
alert(h()); 

這段代碼中變量h指向了f中的那個(gè)匿名函數(shù)(由g返回)。

• 假設(shè)函數(shù)h的作用域是在執(zhí)行alert(h())確定的堪旧，那么此時(shí)h的作用域鏈?zhǔn)牵篽的活動(dòng)對(duì)象->alert的活動(dòng)對(duì)象->window對(duì)象削葱。
• 假設(shè)函數(shù)h的作用域是在定義時(shí)確定的，就是說(shuō)h指向的那個(gè)匿名函數(shù)在定義的時(shí)候就已經(jīng)確定了作用域淳梦。那么在執(zhí)行的時(shí)候佩耳，h的作用域鏈為：h的活動(dòng)對(duì)象->f的活動(dòng)對(duì)象->window對(duì)象。

如果第一種假設(shè)成立谭跨，那輸出值就是undefined干厚；如果第二種假設(shè)成立，輸出值則為1螃宙。
運(yùn)行結(jié)果證明了第2個(gè)假設(shè)是正確的蛮瞄，說(shuō)明函數(shù)的作用域確實(shí)是在定義這個(gè)函數(shù)的時(shí)候就已經(jīng)確定了。

四谆扎、閉包的應(yīng)用場(chǎng)景

保護(hù)函數(shù)內(nèi)的變量安全挂捅。以最開(kāi)始的例子為例，函數(shù)a中i只有函數(shù)b才能訪問(wèn)堂湖，而無(wú)法通過(guò)其他途徑訪問(wèn)到闲先，因此保護(hù)了i的安全性状土。

1.在內(nèi)存中維持一個(gè)變量。依然如前例伺糠，由于閉包蒙谓，函數(shù)a中i的一直存在于內(nèi)存中，因此每次執(zhí)行c()训桶，都會(huì)給i自加1累驮。
2.通過(guò)保護(hù)變量的安全實(shí)現(xiàn)JS私有屬性和私有方法（不能被外部訪問(wèn)）
私有屬性和方法在Constructor外是無(wú)法被訪問(wèn)的

function Constructor(...) {  
  var that = this;  
  var membername = value; 
  function membername(...) {...}
}

以上3點(diǎn)是閉包最基本的應(yīng)用場(chǎng)景，很多經(jīng)典案例都源于此舵揭。

六谤专、結(jié)語(yǔ)

理解JavaScript的閉包是邁向高級(jí)JS程序員的必經(jīng)之路，理解了其解釋和運(yùn)行機(jī)制才能寫(xiě)出更為安全和優(yōu)雅的代碼午绳。