深入理解JavaScript 閉包究竟是什么
1.簡單的例子
首先從一個經(jīng)典錯誤談起，頁面上有若干個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.內(nèi)部函數(shù)
讓我們從一些基礎(chǔ)的知識談起,首先了解一下內(nèi)部函數(shù)。內(nèi)部函數(shù)就是定義在另一個函數(shù)中的函數(shù)。例如：
function outerFn () {
functioninnerFn () {}
}
innerFn就是一個被包在outerFn作用域中的內(nèi)部函數(shù)。這意味著，在outerFn內(nèi)部調(diào)用innerFn是有效的，而在outerFn外部調(diào)用innerFn則是無效的。下面代碼會導(dǎo)致一個JavaScript錯誤：
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
}
innerFn();
不過在outerFn內(nèi)部調(diào)用innerFn，則可以成功運行：
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
innerFn();
}
outerFn();
2.1偉大的逃脫
JavaScript允許開發(fā)人員像傳遞任何類型的數(shù)據(jù)一樣傳遞函數(shù)，也就是說，JavaScript中的內(nèi)部函數(shù)能夠逃脫定義他們的外部函數(shù)。
逃脫的方式有很多種，例如可以將內(nèi)部函數(shù)指定給一個全局變量：
var globalVar;
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
globalVar = innerFn;
}
outerFn();
globalVar();
調(diào)用outerFn時會修改全局變量globalVar，這時候它的引用變?yōu)閕nnerFn，此后調(diào)用globalVar和調(diào)用innerFn一樣。這時在outerFn外部直接調(diào)用innerFn仍然會導(dǎo)致錯誤，這是因為內(nèi)部函數(shù)雖然通過把引用保存在全局變量中實現(xiàn)了逃脫，但這個函數(shù)的名字依然只存在于outerFn的作用域中。
也可以通過在父函數(shù)的返回值來獲得內(nèi)部函數(shù)引用
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
return innerFn;
}
var fnRef = outerFn();
fnRef();
這里并沒有在outerFn內(nèi)部修改全局變量，而是從outerFn中返回了一個對innerFn的引用。通過調(diào)用outerFn能夠獲得這個引用，而且這個引用可以可以保存在變量中。
這種即使離開函數(shù)作用域的情況下仍然能夠通過引用調(diào)用內(nèi)部函數(shù)的事實，意味著只要存在調(diào)用內(nèi)部函數(shù)的可能，JavaScript就需要保留被引用的函數(shù)。而且JavaScript運行時需要跟蹤引用這個內(nèi)部函數(shù)的所有變量，直到最后一個變量廢棄，JavaScript的垃圾收集器才能釋放相應(yīng)的內(nèi)存空間（紅色部分是理解閉包的關(guān)鍵）。
說了半天總算和閉包有關(guān)系了，閉包是指有權(quán)限訪問另一個函數(shù)作用域的變量的函數(shù)，創(chuàng)建閉包的常見方式就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)，就是我們上面說的內(nèi)部函數(shù)，所以剛才說的不是廢話，也是閉包相關(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)通過引用或其它方式調(diào)用這個內(nèi)部函數(shù)時，就會創(chuàng)建一個新的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ù)都會持續(xù)地遞增這個全局變量的值：
Outer function
Inner function globalVar = 1
Inner function globalVar = 2
Outer function
Inner function globalVar = 3
Inner function globalVar = 4
但是如果這個變量是父函數(shù)的局部變量又會怎樣呢？因為內(nèi)部函數(shù)會引用到父函數(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
我們看到的是前面兩種情況合成的效果，通過每個引用調(diào)用innerFn都會獨立的遞增outerVar。也就是說第二次調(diào)用outerFn沒有繼續(xù)沿用outerVar的值，而是在第二次函數(shù)調(diào)用的作用域創(chuàng)建并綁定了一個一個新的outerVar實例，兩個計數(shù)器完全無關(guān)。
當(dāng)內(nèi)部函數(shù)在定義它的作用域的外部被引用時，就創(chuàng)建了該內(nèi)部函數(shù)的一個閉包。這種情況下我們稱既不是內(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)存不會被釋放（最后的值會保存），閉包仍然需要使用它們。
3.閉包之間的交互
當(dāng)存在多個內(nèi)部函數(shù)時，很可能出現(xiàn)意料之外的閉包。我們定義一個遞增函數(shù)，這個函數(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();
我們映射返回兩個內(nèi)部函數(shù)的引用，可以通過返回的引用調(diào)用任一個內(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引用了同一個局部變量，因此他們共享一個封閉環(huán)境。當(dāng)innerFn1為outerVar遞增一時，久違innerFn2設(shè)置了outerVar的新的起點值，反之亦然。我們也看到對outerFn的后續(xù)調(diào)用還會創(chuàng)建這些閉包的新實例，同時也會創(chuàng)建新的封閉環(huán)境，本質(zhì)上是創(chuàng)建了一個新對象，自由變量就是這個對象的實例變量，而閉包就是這個對象的實例方法，而且這些變量也是私有的，因為不能在封裝它們的作用域外部直接引用這些變量，從而確保了了面向?qū)ο髷?shù)據(jù)的專有性。
4.解惑
現(xiàn)在我們可以回頭看看開頭寫的例子就很容易明白為什么第一種寫法每次都會alert 4了。
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
alert(i);
}
}
上面代碼在頁面加載后就會執(zhí)行，當(dāng)i的值為4的時候，判斷條件不成立，for循環(huán)執(zhí)行完畢，但是因為每個span的onclick方法這時候為內(nèi)部函數(shù)，所以i被閉包引用，內(nèi)存不能被銷毀，i的值會一直保持4，直到程序改變它或者所有的onclick函數(shù)銷毀（主動把函數(shù)賦為null或者頁面卸載）時才會被回收。這樣每次我們點擊span的時候，onclick函數(shù)會查找i的值（作用域鏈?zhǔn)且梅绞剑?，一查等?，然后就alert給我們了。而第二種方式是使用了一個立即執(zhí)行的函數(shù)又創(chuàng)建了一層閉包，函數(shù)聲明放在括號內(nèi)就變成了表達(dá)式，后面再加上括號括號就是調(diào)用了，這時候把i當(dāng)參數(shù)傳入，函數(shù)立即執(zhí)行，num保存每次i的值。
這一通下來想必大家也和我一樣，對閉包有所了解了吧，當(dāng)然完全了解的話需要把函數(shù)的執(zhí)行環(huán)境和作用域鏈搞清楚 ^_^
- JavaScript中的作用域鏈和閉包
- JS中批量給元素綁定事件過程中的相關(guān)問題使用閉包解決
- 深入Javascript函數(shù)、遞歸與閉包(執(zhí)行環(huán)境、變量對象與作用域鏈)使用詳解
- 關(guān)于JS中的閉包淺談
- javascript閉包傳參和事件的循環(huán)綁定示例探討
- 一不小心就做錯的JS閉包面試題
- 一道JS前端閉包面試題解析
- javascript從作用域鏈談閉包
- 談一談javascript閉包
- 淺析JavaScript作用域鏈、執(zhí)行上下文與閉包
- JS面向?qū)ο螅?）之Object類，靜態(tài)屬性，閉包，私有屬性， call和apply的使用，繼承的三種實現(xiàn)方法
- Javascript閉包與函數(shù)柯里化淺析
- JavaScript中閉包的寫法和作用詳解
相關(guān)文章
JavaScript中splice與slice的區(qū)別
本文給大家分享的是JavaScript中的splice和slice的用法和區(qū)別，slice()方法和splice()方法都是原生js中對數(shù)組操作的方法，下面我們來詳細(xì)探討下2017-05-05
javascript開發(fā)技術(shù)大全 第4章 直接量與字符集
直接量就是在程序中顯示出來的數(shù)值。javascript直接量包括：字符串、數(shù)字、布爾、數(shù)組、函數(shù)、對象、和特殊直接2011-07-07
這篇文章主要介紹了Js里的for…in和for…of的用法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JS判斷瀏覽器之Navigator對象...2007-01-01
JavaScript window.document的屬性、方法和事件小結(jié)
document屬性作為window對象的一個子對象被創(chuàng)建，是用于訪問頁面中所有元素的對象，這里簡單整理下，方便學(xué)習(xí)js的朋友2012-10-10
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之棧與隊列
在面向?qū)ο蟮某绦蛟O(shè)計里,一般都提供了實現(xiàn)隊列(queue)和堆棧(stack)的方法,而對于JS來說,我們可以實現(xiàn)數(shù)組的相關(guān)操作,來實現(xiàn)隊列和堆棧的功能,看下面的相關(guān)介紹.2016-01-01
這篇文章主要介紹了原生JavaScript事件，包括DOM0事件模型、DOM2事件模型等的相關(guān)知識,需要的朋友可以參考下2014-12-12
JS的document.all函數(shù)在使用中非常的頻繁，下面為大家詳細(xì)介紹下具體的使用示例2013-12-12
這篇文章主要介紹了如何使用javascript計算文本框還能輸入多少個字符,需要的朋友可以參考下2015-07-07
JavaScript indexOf方法入門實例（計算指定字符在字符串中首次出現(xiàn)的位置）
這篇文章主要介紹了JavaScript indexOf方法入門實例,indexOf方法用于計算指定字符在字符串中首次出現(xiàn)的位置,需要的朋友可以參考下2014-10-10