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ù)的專有性。

　　3.解惑

　　現(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的值（作用域鏈是引用方式），一查等于4，然后就alert給我們了。而第二種方式是使用了一個立即執(zhí)行的函數(shù)又創(chuàng)建了一層閉包，函數(shù)聲明放在括號內(nèi)就變成了表達式，后面再加上括號括號就是調(diào)用了，這時候把i當(dāng)參數(shù)傳入，函數(shù)立即執(zhí)行，num保存每次i的值。

　　一、什么是閉包？“官方”的解釋是：所謂“閉包”，指的是一個擁有許多變量和綁定了這些變量的環(huán)境的表達式（通常是一個函數(shù)），因而這些變量也是該表達式的一部分。相信很少有人能直接看懂這句話，因為他描述的太學(xué)術(shù)。我想用如何在Javascript中創(chuàng)建一個閉包來告訴你什么是閉包，因為跳過閉包的創(chuàng)建過程直接理解閉包的定義是非常困難的。看下面這段代碼： function a（）{ var i=0; function b（）{ alert（++i）; } return b;}var c = a（）;c（）;

　　javascript閉包有什么作用

　　這段代碼有兩個特點：

　　1、函數(shù)b嵌套在函數(shù)a內(nèi)部；

　　2、函數(shù)a返回函數(shù)b。

　　這樣在執(zhí)行完var c=a（）后，變量c實際上是指向了函數(shù)b，再執(zhí)行c（）后就會彈出一個窗口顯示i的值（第一次為1）。這段代碼其實就創(chuàng)建了一個閉包，為什么？因為函數(shù)a外的變量c引用了函數(shù)a內(nèi)的函數(shù)b，就是說：

　　當(dāng)函數(shù)a的內(nèi)部函數(shù)b被函數(shù)a外的一個變量引用的時候，就創(chuàng)建了一個閉包。

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

　　二、閉包有什么作用？

　　簡而言之，閉包的作用就是在a執(zhí)行完并返回后，閉包使得Javascript的垃圾回收機制GC不會收回a所占用的資源，因為a的內(nèi)部函數(shù)b的執(zhí)行需要依賴a中的變量。這是對閉包作用的非常直白的描述，不專業(yè)也不嚴謹，但大概意思就是這樣，理解閉包需要循序漸進的過程。

　　在上面的例子中，由于閉包的存在使得函數(shù)a返回后，a中的i始終存在，這樣每次執(zhí)行c（），i都是自加1后alert出i的值。

　　那 么我們來想象另一種情況，如果a返回的不是函數(shù)b，情況就完全不同了。因為a執(zhí)行完后，b沒有被返回給a的外界，只是被a所引用，而此時a也只會被b引 用，因此函數(shù)a和b互相引用但又不被外界打擾（被外界引用），函數(shù)a和b就會被GC回收。（關(guān)于Javascript的垃圾回收機制將在后面詳細介紹）

　　三、閉包內(nèi)的微觀世界

　　如 果要更加深入的了解閉包以及函數(shù)a和嵌套函數(shù)b的關(guān)系，我們需要引入另外幾個概念：函數(shù)的執(zhí)行環(huán)境（excution context）、活動對象（call object）、作用域（scope）、作用域鏈（scope chain）。以函數(shù)a從定義到執(zhí)行的過程為例闡述這幾個概念。

　　1、當(dāng)定義函數(shù)a的時候，js解釋器會將函數(shù)a的作用域鏈（scope chain）設(shè)置為定義a時a所在的“環(huán)境”，如果a是一個全局函數(shù)，則scope chain中只有window對象。

　　2、當(dāng)函數(shù)a執(zhí)行的時候，a會進入相應(yīng)的執(zhí)行環(huán)境（excution context）。

　　3、在創(chuàng)建執(zhí)行環(huán)境的過程中，首先會為a添加一個scope屬性，即a的作用域，其值就為第1步中的scope chain。即a.scope=a的作用域鏈。

　　4、然后執(zhí)行環(huán)境會創(chuàng)建一個活動對象（call object）。活動對象也是一個擁有屬性的對象，但它不具有原型而且不能通過JavaScript代碼直接訪問。創(chuàng)建完活動對象后，把活動對象添加到a的作用域鏈的最頂端。此時a的作用域鏈包含了兩個對象：a的活動對象和window對象。

　　5、下一步是在活動對象上添加一個arguments屬性，它保存著調(diào)用函數(shù)a時所傳遞的參數(shù)。

　　6、最后把所有函數(shù)a的形參和內(nèi)部的函數(shù)b的引用也添加到a的活動對象上。在這一步中，完成了函數(shù)b的的定義，因此如同第3步，函數(shù)b的作用域鏈被設(shè)置為b所被定義的環(huán)境，即a的作用域。

　　到此，整個函數(shù)a從定義到執(zhí)行的步驟就完成了。此時a返回函數(shù)b的引用給c，又函數(shù)b的作用域鏈包含了對函數(shù)a的活動對象的引用，也就是說b可以訪問到a中定義的所有變量和函數(shù)。函數(shù)b被c引用，函數(shù)b又依賴函數(shù)a，因此函數(shù)a在返回后不會被GC回收。

　　當(dāng)函數(shù)b執(zhí)行的時候亦會像以上步驟一樣。因此，執(zhí)行時b的作用域鏈包含了3個對象：b的活動對象、a的活動對象和window對象，如下圖所示：

　　如圖所示，當(dāng)在函數(shù)b中訪問一個變量的時候，搜索順序是先搜索自身的活動對象，如果存在則返回，如果不存在將繼續(xù)搜索函數(shù)a的活動對象，依 次查找，直到找到為止。如果整個作用域鏈上都無法找到，則返回undefined。如果函數(shù)b存在prototype原型對象，則在查找完自身的活動對象 后先查找自身的原型對象，再繼續(xù)查找。這就是Javascript中的變量查找機制。

　　四、閉包的應(yīng)用場景

　　1、保護函數(shù)內(nèi)的變量安全。以最開始的例子為例，函數(shù)a中i只有函數(shù)b才能訪問，而無法通過其他途徑訪問到，因此保護了i的安全性。

　　2、在內(nèi)存中維持一個變量。依然如前例，由于閉包，函數(shù)a中i的一直存在于內(nèi)存中，因此每次執(zhí)行c（），都會給i自加1。

　　以上兩點是閉包最基本的應(yīng)用場景，很多經(jīng)典案例都源于此。五、Javascript的垃圾回收機制

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