用JavaScript一年多了，閉包總是讓人二丈和尚摸不著頭腦。陸陸續續接觸了一些閉包的知識，也犯過幾次因為不理解閉包導致的錯誤，一年多了資料也看了一些，但還是不是非常明白，最近偶然看了一下 jQuery基礎教程 的附錄，發現附錄A對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 () {
function
innerFn () {}
}
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的后續調用還會創建這些閉包的新實例，同時也會創建新的封閉環境，本質上是創建了一個新對象，自由變量就是這個對象的實例變量，而閉包就是這個對象的實例方法 ，而且這些變量也是私有的，因為不能在封裝它們的作用域外部直接引用這些變量，從而確保了了面向對象數據的專有性。
?
3.解惑
現在我們可以回頭看看開頭寫的例子就很容易明白為什么第一種寫法每次都會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的值。
這一通下來想必大家也和我一樣，對閉包有所了解了吧，當然完全了解的話需要把函數的執行環境和作用域鏈搞清楚 ^_^
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
