用JavaScript一年多了，閉包總是讓人二丈和尚摸不著頭腦。陸陸續(xù)續(xù)接觸了一些閉包的知識(shí)，也犯過(guò)幾次因?yàn)椴焕斫忾]包導(dǎo)致的錯(cuò)誤，一年多了資料也看了一些，但還是不是非常明白，最近偶然看了一下 jQuery基礎(chǔ)教程 的附錄，發(fā)現(xiàn)附錄A對(duì)JavaScript的閉包的介紹簡(jiǎn)單易懂，于是借花獻(xiàn)佛總結(jié)一下。
?
1.簡(jiǎn)單的例子
首先從一個(gè)經(jīng)典錯(cuò)誤談起，頁(yè)面上有若干個(gè)div， 我們想給它們綁定一個(gè)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);
}
}
});
很簡(jiǎn)單的功能可是卻偏偏出錯(cuò)了，每次alert出的值都是4，簡(jiǎn)單的修改就好使了
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.內(nèi)部函數(shù)
讓我們從一些基礎(chǔ)的知識(shí)談起,首先了解一下內(nèi)部函數(shù)。內(nèi)部函數(shù)就是定義在另一個(gè)函數(shù)中的函數(shù)。例如：
function
outerFn () {
function
innerFn () {}
}
innerFn就是一個(gè)被包在outerFn作用域中的內(nèi)部函數(shù)。這意味著，在outerFn內(nèi)部調(diào)用innerFn是有效的，而在outerFn外部調(diào)用innerFn則是無(wú)效的。下面代碼會(huì)導(dǎo)致一個(gè)JavaScript錯(cuò)誤：
?
function
outerFn() {
document.write(
"Outer function<br/>"
);
function
innerFn() {
document.write(
"Inner function<br/>"
);
}
}
innerFn();
不過(guò)在outerFn內(nèi)部調(diào)用innerFn，則可以成功運(yùn)行：
function
outerFn() {
document.write(
"Outer function<br/>"
);
function
innerFn() {
document.write(
"Inner function<br/>"
);
}
innerFn();
}
outerFn();
?
?
2.1偉大的逃脫
JavaScript允許開(kāi)發(fā)人員像傳遞任何類型的數(shù)據(jù)一樣傳遞函數(shù)，也就是說(shuō)，JavaScript中的內(nèi)部函數(shù)能夠逃脫定義他們的外部函數(shù)。
逃脫的方式有很多種，例如可以將內(nèi)部函數(shù)指定給一個(gè)全局變量：
var
globalVar;
function
outerFn() {
document.write(
"Outer function<br/>"
);
function
innerFn() {
document.write(
"Inner function<br/>"
);
}
globalVar
=
innerFn;
}
outerFn();
globalVar();
?
調(diào)用outerFn時(shí)會(huì)修改全局變量globalVar，這時(shí)候它的引用變?yōu)閕nnerFn，此后調(diào)用globalVar和調(diào)用innerFn一樣。這時(shí)在outerFn外部直接調(diào)用innerFn仍然會(huì)導(dǎo)致錯(cuò)誤，這是因?yàn)閮?nèi)部函數(shù)雖然通過(guò)把引用保存在全局變量中實(shí)現(xiàn)了逃脫，但這個(gè)函數(shù)的名字依然只存在于outerFn的作用域中。
也可以通過(guò)在父函數(shù)的返回值來(lái)獲得內(nèi)部函數(shù)引用
function
outerFn() {
document.write(
"Outer function<br/>"
);
function
innerFn() {
document.write(
"Inner function<br/>"
);
}
return
innerFn;
}
var
fnRef =
outerFn();
fnRef();
這里并沒(méi)有在outerFn內(nèi)部修改全局變量，而是從outerFn中返回了一個(gè)對(duì)innerFn的引用。通過(guò)調(diào)用outerFn能夠獲得這個(gè)引用，而且這個(gè)引用可以可以保存在變量中。
?
這種即使離開(kāi)函數(shù)作用域的情況下仍然能夠通過(guò)引用調(diào)用內(nèi)部函數(shù)的事實(shí)，意味著 只要存在調(diào)用內(nèi)部函數(shù)的可能，JavaScript就需要保留被引用的函數(shù)。而且JavaScript運(yùn)行時(shí)需要跟蹤引用這個(gè)內(nèi)部函數(shù)的所有變量，直到最后一個(gè)變量廢棄，JavaScript的垃圾收集器才能釋放相應(yīng)的內(nèi)存空間（紅色部分是理解閉包的關(guān)鍵）。
?
說(shuō)了半天總算和閉包有關(guān)系了， 閉包是指有權(quán)限訪問(wèn)另一個(gè)函數(shù)作用域的變量的函數(shù) ，創(chuàng)建閉包的常見(jiàn)方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)，就是我們上面說(shuō)的內(nèi)部函數(shù)，所以剛才說(shuō)的不是廢話，也是閉包相關(guān)的 ^_^
?
1.2變量的作用域
內(nèi)部函數(shù)也可以有自己的變量，這些變量都被限制在內(nèi)部函數(shù)的作用域中：
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();
?
每當(dāng)通過(guò)引用或其它方式調(diào)用這個(gè)內(nèi)部函數(shù)時(shí)，就會(huì)創(chuàng)建一個(gè)新的innerVar變量，然后加1，最后顯示
Outer function
Inner function innerVar = 1
Inner function innerVar = 1
Outer function
Inner function innerVar = 1
Inner function innerVar = 1
?
內(nèi)部函數(shù)也可以像其他函數(shù)一樣引用全局變量：
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();
?
現(xiàn)在每次調(diào)用內(nèi)部函數(shù)都會(huì)持續(xù)地遞增這個(gè)全局變量的值：
Outer function
Inner function globalVar = 1
Inner function globalVar = 2
Outer function
Inner function globalVar = 3
Inner function globalVar = 4
?
?
但是如果這個(gè)變量是父函數(shù)的局部變量又會(huì)怎樣呢？因?yàn)閮?nèi)部函數(shù)會(huì)引用到父函數(shù)的作用域（有興趣可以了解一下作用域鏈和活動(dòng)對(duì)象的知識(shí)），內(nèi)部函數(shù)也可以引用到這些變量
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();
?
這一次結(jié)果非常有意思，也許或出乎我們的意料
Outer function
Inner function outerVar = 1
Inner function outerVar = 2
Outer function
Inner function outerVar = 1
Inner function outerVar = 2
我們看到的是前面兩種情況合成的效果，通過(guò)每個(gè)引用調(diào)用innerFn都會(huì)獨(dú)立的遞增outerVar。也就是說(shuō)第二次調(diào)用outerFn沒(méi)有繼續(xù)沿用outerVar的值，而是在第二次函數(shù)調(diào)用的作用域創(chuàng)建并綁定了一個(gè)一個(gè)新的outerVar實(shí)例，兩個(gè)計(jì)數(shù)器完全無(wú)關(guān)。
當(dāng)內(nèi)部函數(shù)在定義它的作用域的外部被引用時(shí)，就創(chuàng)建了該內(nèi)部函數(shù)的一個(gè)閉包。這種情況下我們稱既不是內(nèi)部函數(shù)局部變量，也不是其參數(shù)的變量為自由變量，稱外部函數(shù)的調(diào)用環(huán)境為封閉閉包的環(huán)境。從本質(zhì)上講，如果內(nèi)部函數(shù)引用了位于外部函數(shù)中的變量，相當(dāng)于授權(quán)該變量能夠被延遲使用。因此，當(dāng)外部函數(shù)調(diào)用完成后，這些變量的內(nèi)存不會(huì)被釋放（最后的值會(huì)保存），閉包仍然需要使用它們。
?
3.閉包之間的交互
當(dāng)存在多個(gè)內(nèi)部函數(shù)時(shí)，很可能出現(xiàn)意料之外的閉包。我們定義一個(gè)遞增函數(shù)，這個(gè)函數(shù)的增量為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();
我們映射返回兩個(gè)內(nèi)部函數(shù)的引用，可以通過(guò)返回的引用調(diào)用任一個(gè)內(nèi)部函數(shù)，結(jié)果：
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引用了同一個(gè)局部變量，因此他們共享一個(gè)封閉環(huán)境。當(dāng)innerFn1為outerVar遞增一時(shí)，久違innerFn2設(shè)置了outerVar的新的起點(diǎn)值，反之亦然。我們也看到 對(duì)outerFn的后續(xù)調(diào)用還會(huì)創(chuàng)建這些閉包的新實(shí)例，同時(shí)也會(huì)創(chuàng)建新的封閉環(huán)境，本質(zhì)上是創(chuàng)建了一個(gè)新對(duì)象，自由變量就是這個(gè)對(duì)象的實(shí)例變量，而閉包就是這個(gè)對(duì)象的實(shí)例方法 ，而且這些變量也是私有的，因?yàn)椴荒茉诜庋b它們的作用域外部直接引用這些變量，從而確保了了面向?qū)ο髷?shù)據(jù)的專有性。
?
3.解惑
現(xiàn)在我們可以回頭看看開(kāi)頭寫(xiě)的例子就很容易明白為什么第一種寫(xiě)法每次都會(huì)alert 4了。
for
(
var
i = 0; i < spans.length; i++
) {
spans[i].onclick
=
function
() {
alert(i);
}
}
?
上面代碼在頁(yè)面加載后就會(huì)執(zhí)行，當(dāng)i的值為4的時(shí)候，判斷條件不成立，for循環(huán)執(zhí)行完畢，但是因?yàn)槊總€(gè)span的onclick方法這時(shí)候?yàn)閮?nèi)部函數(shù)，所以i被閉包引用，內(nèi)存不能被銷毀，i的值會(huì)一直保持4，直到程序改變它或者所有的onclick函數(shù)銷毀（主動(dòng)把函數(shù)賦為null或者頁(yè)面卸載）時(shí)才會(huì)被回收。這樣每次我們點(diǎn)擊span的時(shí)候，onclick函數(shù)會(huì)查找i的值（作用域鏈?zhǔn)且梅绞剑徊榈扔?，然后就alert給我們了。而第二種方式是使用了一個(gè)立即執(zhí)行的函數(shù)又創(chuàng)建了一層閉包，函數(shù)聲明放在括號(hào)內(nèi)就變成了表達(dá)式，后面再加上括號(hào)括號(hào)就是調(diào)用了，這時(shí)候把i當(dāng)參數(shù)傳入，函數(shù)立即執(zhí)行，num保存每次i的值。
這一通下來(lái)想必大家也和我一樣，對(duì)閉包有所了解了吧，當(dāng)然完全了解的話需要把函數(shù)的執(zhí)行環(huán)境和作用域鏈搞清楚 ^_^
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
