深入理解JavaScript 閉包究竟是什麼

1.簡單的例子

首先從一個經典錯誤談起，頁面上有若干個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);
}
});

2.內建函式

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

複製代碼 代碼如下: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();

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

複製代碼 代碼如下:function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
innerFn();
}
outerFn();

2.1偉大的逃脫

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

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

複製代碼 代碼如下:var globalVar;
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
globalVar = innerFn;
}
outerFn();
globalVar();

調用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的垃圾收集器才能釋放相應的記憶體空間（紅色部分是理解閉包的關鍵）。

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

1.2變數的範圍

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

複製代碼 代碼如下: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 function
Inner function innerVar = 1
Inner function innerVar = 1
Outer function
Inner function innerVar = 1
Inner 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 function
Inner function globalVar = 1
Inner function globalVar = 2
Outer function
Inner function globalVar = 3
Inner 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 function
Inner function outerVar = 1
Inner function outerVar = 2
Outer function
Inner function outerVar = 1
Inner function outerVar = 2

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

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

3.閉包之間的互動

當存在多個內建函式時，很可能出現意料之外的閉包。我們定義一個遞增函數，這個函數的增量為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 function
Inner function 1 outerVar = 1
Inner function 2 outerVar = 3
Inner function 1 outerVar = 4
Outer function
Inner function 1 outerVar = 1
Inner function 2 outerVar = 3
Inner function 1 outerVar = 4

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

4.解惑

現在我們可以回頭看看開頭寫的例子就很容易明白為什麼第一種寫法每次都會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的值。

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