跟我學習javascript的閉包_javascript技巧

JavaScript 閉包究竟是什麼?

用JavaScript一年多了，閉包總是讓人二丈和尚摸不著頭腦。陸陸續續接觸了一些閉包的知識，也犯過幾次因為不理解閉包導致的錯誤，一年多了資料也看了一些，但還是不是非常明白，最近偶然看了一下 jQuery基礎教程 的附錄，發現附錄A對JavaScript的閉包的介紹簡單易懂，於是借花獻佛總結一下。

1、定義

閉包：是指有權訪問另外一個函數範圍中的變數的函數。建立閉包的常見方式就是在一個函數內部建立另外一個函數。

直接上例子

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

這段代碼有兩個特點：

1）、函數b嵌套在函數a內部；
2）、函數a返回函數b。

這樣在執行完var c=a()後，變數c實際上是指向了函數b，再執行c()後就會彈出一個視窗顯示i的值(第一次為1)。這段代碼其實就建立了一個閉包，為什嗎？因為函數a外的變數c引用了函數a內的函數b，就是說：
當函數a的內建函式b被函數a外的一個變數引用的時候，就建立了一個閉包。

我猜想你一定還是不理解閉包，因為你不知道閉包有什麼作用，下面讓我們繼續探索。

2、閉包有什麼作用？

簡而言之，閉包的作用就是在a執行完並返回後，閉包使得Javascript的記憶體回收機制GC不會收回a所佔用的資源，因為a的內建函式b的執行需要依賴a中的變數。這是對閉包作用的非常直白的描述，不專業也不嚴謹，但大概意思就是這樣，理解閉包需要循序漸進的過程。
在上面的例子中，由於閉包的存在使得函數a返回後，a中的i始終存在，這樣每次執行c()，i都是自加1後alert出i的值。

那麼我們來想象另一種情況，如果a返回的不是函數b，情況就完全不同了。因為a執行完後，b沒有被返回給a的外界，只是被a所引用，而此時a也只會被b引用，因此函數a和b互相引用但又不被外界打擾(被外界引用)，函數a和b就會被GC回收。(關於Javascript的記憶體回收機制將在後面詳細介紹)

3、閉包內的微觀世界

如果要更加深入的瞭解閉包以及函數a和嵌套函數b的關係，我們需要引入另外幾個概念：函數的執行環境(excution context)、使用中的物件(call object)、範圍(scope)、範圍鏈(scope chain)。以函數a從定義到執行的過程為例闡述這幾個概念。

1）、當定義函數a的時候，js解譯器會將函數a的範圍鏈(scope chain)設定為定義a時a所在的“環境”，如果a是一個全域函數，則scope chain中只有window對象。
2）、當函數a執行的時候，a會進入相應的執行環境(excution context)。
3）、在建立執行環境的過程中，首先會為a添加一個scope屬性，即a的範圍，其值就為第1步中的scope chain。即a.scope=a的範圍鏈。
4）、然後執行環境會建立一個使用中的物件(call object)。使用中的物件也是一個擁有屬性的對象，但它不具有原型而且不能通過JavaScript代碼直接存取。建立完使用中的物件後，把使用中的物件添加到a的範圍鏈的最頂端。此時a的範圍鏈包含了兩個對象：a的使用中的物件和window對象。
5）、下一步是在使用中的物件上添加一個arguments屬性，它儲存著調用函數a時所傳遞的參數。
6）、最後把所有函數a的形參和內部的函數b的引用也添加到a的使用中的物件上。在這一步中，完成了函數b的的定義，因此如同第3步，函數b的範圍鏈被設定為b所被定義的環境，即a的範圍。

到此，整個函數a從定義到執行的步驟就完成了。此時a返回函數b的引用給c，又函數b的範圍鏈包含了對函數a的使用中的物件的引用，也就是說b可以訪問到a中定義的所有變數和函數。函數b被c引用，函數b又依賴函數a，因此函數a在返回後不會被GC回收。

當函數b執行的時候亦會像以上步驟一樣。因此，執行時b的範圍鏈包含了3個對象：b的使用中的物件、a的使用中的物件和window對象，當在函數b中訪問一個變數的時候，搜尋順序是先搜尋自身的使用中的物件，如果存在則返回，如果不存在將繼續搜尋函數a的使用中的物件，依次尋找，直到找到為止。如果整個範圍鏈上都無法找到，則返回undefined。如果函數b存在prototype原型對象，則在尋找完自身的使用中的物件後先尋找自身的原型對象，再繼續尋找。這就是Javascript中的變數尋找機制。

4、閉包的應用情境

1）、保護函數內的變數安全。以最開始的例子為例，函數a中i只有函數b才能訪問，而無法通過其他途徑訪問到，因此保護了i的安全性。
2）、在記憶體中維持一個變數。依然如前例，由於閉包，函數a中i的一直存在於記憶體中，因此每次執行c()，都會給i自加1。
以上兩點是閉包最基本的應用情境，很多經典案例都源於此。

5、Javascript的記憶體回收機制

在Javascript中，如果一個對象不再被引用，那麼這個對象就會被GC回收。如果兩個對象互相引用，而不再被第3者所引用，那麼這兩個互相引用的對象也會被回收。因為函數a被b引用，b又被a外的c引用，這就是為什麼函數a執行後不會被回收的原因。

在javascript中沒有塊級範圍，一般為了給某個函數申明一些只有該函數才能使用的局部變數時，我們就會用到閉包，這樣我們可以很大程度上減少全域範圍中的變數，淨化全域範圍。

使用閉包有如上的好處，當然這樣的好處是需要付出代價的，代價就是記憶體的佔用。

如何理解上面的那句話呢？

每個函數的執行，都會建立一個與該函數相關的函數執行環境，或者說是函數執行內容。這個執行內容中有一個屬性 scope chain（範圍鏈指標），這個指標指向一個範圍鏈結構，範圍鏈中的指標又都指向各個範圍對應的使用中的物件。正常情況，一個函數在調用開始執行時建立這個函數執行內容及相應的範圍鏈，在函數執行結束後釋放函數執行內容及相應範圍鏈所佔的空間。

//聲明函數function test(){ var str = "hello world"; console.log(str);}//調用函數test();

在調用函數的時候會在記憶體中產生如下圖的結構：

但是閉包的情況就有點特殊了，由於閉包函數可以訪問外層函數中的變數，所以外層函數在執行結束後，其範圍使用中的物件並不會被釋放（注意，外層函數執行結束後執行環境和對應的範圍鏈就會被銷毀），而是被閉包函數的範圍鏈所引用，直到閉包函數被銷毀後，外層函數的範圍使用中的物件才會被銷毀。這也正是閉包要佔用記憶體的原因。

所以使用閉包有好處，也有壞處，濫用閉包會造成記憶體的大量消耗。

使用閉包還有其他的副作用，可以說是bug，也可以說不是，相對不同的業務可能就會有不同的看法。

這個副作用是閉包函數只能取到外層函數變數的最終值。

測試代碼如下:(這裡使用了jquery對象)

 /*閉包缺陷*/ (function($){  var result = new Array(),  i = 0;  for(;i<10;i++){   result[i] = function(){    return i;   };  }  $.RES1 = result; })(jQuery); // 執行數組中的函數 $.RES1[0]();

上面的代碼先通過匿名函數運算式開闢了一塊私人範圍，這個匿名函數就是我們上面所說的外層函數，該外層函數有一個參數$,同時還定義了變數result和 I , 通過for迴圈給數組result賦值一個匿名函數，這個匿名函數就是閉包，他訪問了外層函數的變數I , 理論上數組resulti 會返回相應的數組下標值，實際情況卻不如所願。

如上代碼 $.RES10 的執行結果是10.

為什麼會這樣呢，因為i的最終值就是10.

下面我們通過下圖來詳細說明下，上面的那段代碼執行時在記憶體中到底發生了什麼：

那麼這個副作用有沒有辦法可以修複呢？當然可以！

我們可以通過下面的代碼來達到我們的預期。

 /*修複閉包缺陷*/ (function($){  var result = new Array(),  i = 0;  for(;i<10;i++){   result[i] = function(num){    return function(){     return num;    }   }(i);  }  $.RES2 = result; })(jQuery); //調用閉包函數 console.log($.RES2[0]());

上面的代碼又在記憶體中發生了什嗎？我們同樣用下面的一幅圖來詳細解釋。看懂了上面的圖，我們也就不難理解下面的圖。

6.簡單的例子

首先從一個經典錯誤談起，頁面上有若干個div， 我們想給它們綁定一個onclick方法，於是有了下面的代碼

<div id="divTest"> <span>0</span> <span>1</span> <span>2</span> <span>3</span></div><div id="divTest2"> <span>0</span> <span>1</span> <span>2</span> <span>3</span></div>$(document).ready(function() {  var spans = $("#divTest span");  for (var i = 0; i < spans.length; i++) {   spans[i].onclick = function() {    alert(i);   }  }});

很簡單的功能可是卻偏偏出錯了，每次alert出的值都是4，簡單的修改就好使了

var spans2 = $("#divTest2 span");$(document).ready(function() { for (var i = 0; i < spans2.length; i++) {  (function(num) {   spans2[i].onclick = function() {    alert(num);   }  })(i); }});

7.內建函式

讓我們從一些基礎的知識談起,首先瞭解一下內建函式。內建函式就是定義在另一個函數中的函數。例如：

function outerFn () { functioninnerFn () {}}

innerFn就是一個被包在outerFn範圍中的內建函式。這意味著，在outerFn內部調用innerFn是有效，而在outerFn外部調用innerFn則是無效的。下面代碼會導致一個JavaScript錯誤：

function outerFn() { document.write("Outer function<br/>"); function innerFn() {  document.write("Inner function<br/>"); }}innerFn();//Uncaught ReferenceError: innerFn is not defined

不過在outerFn內部調用innerFn，則可以成功運行：

function outerFn() {   document.write("Outer function<br/>");   function innerFn() {    document.write("Inner function<br/>");   }   innerFn();  }  outerFn();

8、偉大的逃脫（內建函式如何逃脫外部函數）

JavaScript允許開發人員像傳遞任何類型的資料一樣傳遞函數，也就是說，JavaScript中的內建函式能夠逃脫定義他們的外部函數。

逃脫的方式有很多種，例如可以將內建函式指定給一個全域變數：

//定義全域變數逃脫var globalVar;function outerFn() { document.write("Outer function<br/>");    function innerFn() {  document.write("Inner function<br/>"); } globalVar = innerFn;}outerFn(); //Outer function Inner functionglobalVar(); //Outer function Inner functioninnerFn(); //ReferenceError: innerFn is not defined

調用outerFn時會修改全域變數globalVar，這時候它的引用變為innerFn，此後調用globalVar和調用innerFn一樣。這時在outerFn外部直接調用innerFn仍然會導致錯誤，這是因為內建函式雖然通過把引用儲存在全域變數中實現了逃脫，但這個函數的名字依然只存在於outerFn的範圍中。

也可以通過在父函數的傳回值來獲得內建函式引用

function outerFn() { document.write("Outer function<br/>"); function innerFn() {  document.write("Inner function<br/>"); } return innerFn;}var fnRef = outerFn();fnRef();

這裡並沒有在outerFn內部修改全域變數，而是從outerFn中返回了一個對innerFn的引用。通過調用outerFn能夠獲得這個引用，而且這個引用可以可以儲存在變數中。

這種即使離開函數範圍的情況下仍然能夠通過引用調用內建函式的事實，意味著只要存在調用內建函式的可能，JavaScript就需要保留被引用的函數。而且JavaScript運行時需要跟蹤引用這個內建函式的所有變數，直到最後一個變數廢棄，JavaScript的垃圾收集器才能釋放相應的記憶體空間（紅色部分是理解閉包的關鍵）。

說了半天總算和閉包有關係了，閉包是指有許可權訪問另一個函數範圍的變數的函數，建立閉包的常見方式就是在一個函數內部建立另一個函數，就是我們上面說的內建函式，所以剛才說的不是廢話，也是閉包相關的 ^_^

9、變數的範圍

內建函式也可以有自己的變數，這些變數都被限制在內建函式的範圍中：

function outerFn() { document.write("Outer function<br/>"); function innerFn() {  var innerVar = 0;   innerVar++;   document.write("Inner function\t");   document.write("innerVar = "+innerVar+"<br/>");  }  return innerFn;}  var fnRef = outerFn();  fnRef();  fnRef();  var fnRef2 = outerFn();  fnRef2();  fnRef2();

每當通過引用或其它方式調用這個內建函式時，就會建立一個新的innerVar變數，然後加1，最後顯示

Outer functionInner function innerVar = 1Inner function innerVar = 1Outer functionInner function innerVar = 1Inner function innerVar = 1

內建函式也可以像其他函數一樣引用全域變數：

var globalVar = 0;function outerFn() { document.write("Outer function<br/>"); function innerFn() {  globalVar++;  document.write("Inner function\t");  document.write("globalVar = " + globalVar + "<br/>"); } return innerFn;} var fnRef = outerFn(); fnRef(); fnRef(); var fnRef2 = outerFn(); fnRef2(); fnRef2();

現在每次調用內建函式都會持續地遞增這個全域變數的值：

Outer functionInner function globalVar = 1Inner function globalVar = 2Outer functionInner function globalVar = 3Inner function globalVar = 4

但是如果這個變數是父函數的局部變數又會怎樣呢？因為內建函式會引用到父函數的範圍（有興趣可以瞭解一下範圍鏈和使用中的物件的知識），內建函式也可以引用到這些變數

function outerFn() { var outerVar = 0; document.write("Outer function<br/>"); function innerFn() {  outerVar++;  document.write("Inner function\t");  document.write("outerVar = " + outerVar + "<br/>"); } return innerFn;}var fnRef = outerFn();fnRef();fnRef();var fnRef2 = outerFn();fnRef2();fnRef2();

這一次結果非常有意思，也許或出乎我們的意料

Outer functionInner function outerVar = 1Inner function outerVar = 2Outer functionInner function outerVar = 1Inner function outerVar = 2

我們看到的是前面兩種情況合成的效果，通過每個引用調用innerFn都會獨立的遞增outerVar。也就是說第二次調用outerFn沒有繼續沿用outerVar的值，而是在第二次函數調用的範圍建立並綁定了一個一個新的outerVar執行個體，兩個計數器完全無關。

當內建函式在定義它的範圍的外部被引用時，就建立了該內建函式的一個閉包。這種情況下我們稱既不是內建函式局部變數，也不是其參數的變數為自由變數，稱外部函數的調用環境為封閉閉包的環境。從本質上講，如果內建函式引用了位於外部函數中的變數，相當於授權該變數能夠被延遲使用。因此，當外部函數調用完成後，這些變數的記憶體不會被釋放（最後的值會儲存），閉包仍然需要使用它們。

10.閉包之間的互動

當存在多個內建函式時，很可能出現意料之外的閉包。我們定義一個遞增函數，這個函數的增量為2

function outerFn() {  var outerVar = 0;  document.write("Outer function<br/>");  function innerFn1() {   outerVar++;   document.write("Inner function 1\t");   document.write("outerVar = " + outerVar + "<br/>");  }  function innerFn2() {   outerVar += 2;   document.write("Inner function 2\t");   document.write("outerVar = " + outerVar + "<br/>");  }  return { "fn1": innerFn1, "fn2": innerFn2 };}var fnRef = outerFn();fnRef.fn1();fnRef.fn2();fnRef.fn1();var fnRef2 = outerFn();fnRef2.fn1();fnRef2.fn2();fnRef2.fn1();

我們映射返回兩個內建函式的引用，可以通過返回的引用調用任一個內建函式，結果：

Outer functionInner function 1 outerVar = 1Inner function 2 outerVar = 3Inner function 1 outerVar = 4Outer functionInner function 1 outerVar = 1Inner function 2 outerVar = 3Inner function 1 outerVar = 4

innerFn1和innerFn2引用了同一個局部變數，因此他們共用一個封閉環境。當innerFn1為outerVar遞增一時，久違innerFn2設定了outerVar的新的起點值，反之亦然。我們也看到對outerFn的後續調用還會建立這些閉包的新執行個體，同時也會建立新的封閉環境，本質上是建立了一個新對象，自由變數就是這個對象的執行個體變數，而閉包就是這個對象的執行個體方法，而且這些變數也是私人的，因為不能在封裝它們的範圍外部直接引用這些變數，從而確保了了物件導向資料的專有性。

11.解惑
現在我們可以回頭看看開頭寫的例子就很容易明白為什麼第一種寫法每次都會alert 4了。

for (var i = 0; i < spans.length; i++) { spans[i].onclick = function() {  alert(i); }}

上面代碼在頁面載入後就會執行，當i的值為4的時候，判斷條件不成立，for迴圈執行完畢，但是因為每個span的onclick方法這時候為內建函式，所以i被閉包引用(閉包引用傳的是引用)，記憶體不能被銷毀，i的值會一直保持4，直到程式改變它或者所有的onclick函數銷毀（主動把函數賦為null或者頁面卸載）時才會被回收。這樣每次我們點擊span的時候，onclick函數會尋找i的值（範圍鏈是引用方式），一查等於4，然後就alert給我們了。

而第二種方式是使用了一個立即執行的函數又建立了一層閉包，函式宣告放在括弧內就變成了運算式，後面再加上括弧括弧就是調用了，這時候把i當參數傳入，函數立即執行，num儲存每次i的值。

這一通下來想必大家也和我一樣，對閉包有所瞭解了吧，當然完全瞭解的話需要把函數的執行環境和範圍鏈搞清楚。