JavaScript學習總結(十六)——Javascript閉包（Closure）

　　閉包（closure）是Javascript語言的一個難點，也是它的特點，不少高級應用都要依靠閉包實現。很早就接觸過閉包這個概念了，可是一直糊里糊塗的，沒有可以弄明白JavaScript的閉包究竟是什麼，有什麼用，今天在網上看到了一篇講JavaScript閉包的文章(原文連接)，講得很是好，這下算是完全明白了JavaScript的閉包究竟是個神馬東東以及閉包的用途了，在此寫出來和你們分享一下，但願不理解JavaScript閉包的朋友們看了以後可以理解閉包！如下內容大部分是來自原文，我在原文的基礎上加上一些代碼註釋和運行效果圖以及少量的修改，方便你們理解！

1、變量的做用域

　　要理解閉包，首先必須理解Javascript特殊的變量做用域。

　　在JavaScript中，變量的做用域分兩種：全局變量和局部變量。

　　在Javascript中，在函數內部能夠直接讀取全局變量。

1 var n=999;//定義全局變量n
2 function f1(){
3 　　alert("在函數內部訪問全局變量n，n="+n);//在函數內部訪問全局變量n
4 }
5 f1(); // 999

運行結果：

　　　　

　　可是反過來則不行，在函數外部沒法讀取函數內的局部變量。

1  function f1(){
2  　　var n=999;//在f1函數內部定義局部變量n
3  }
4  alert("在函數外部訪問局部變量n，n="+n); //在函數外部訪問局部變量n，錯誤：n未定義

運行結果：

　　

　　這裏有一個地方須要注意，函數內部聲明變量的時候，必定要使用var命令。若是不用的話，其實是聲明瞭一個全局變量！

1 function f1(){
2 　　n=999;
3 }
4 f1();
5 alert("n在f1函數內部沒有使用var來聲明，此時n就是一個全局變量，\r\n證實：n="+n+"，window.n==n的結果是："+(window.n==n));

運行結果：

　　

2、如何從外部讀取局部變量？

　　出於種種緣由，咱們有時候須要獲得函數內的局部變量。可是，前面已經說過了，正常狀況下，這是辦不到的，只有經過變通方法才能實現。

那就是在函數的內部，再定義一個函數。

1 function f1(){
2 　　var n=999;//f1函數內部的局部變量n
3     //在f1函數內部定義一個f2函數
4 　　function f2(){
5        //在f2函數內部是能夠訪問局部變量n的
6 　　　　alert(n); // 999
7 　　}
8 }

　　在上面的代碼中，函數f2就被包括在函數f1內部，這時f1內部的全部局部變量，對f2都是可見的。可是反過來就不行，f2內部的局部變量，對f1 就是不可見的。這就是Javascript語言特有的"鏈式做用域"結構（chain scope），子對象會一級一級地向上尋找全部父對象的變量。因此，父對象的全部變量，對子對象都是可見的，反之則不成立。既然f2能夠讀取f1中的局部變量，那麼只要把f2做爲返回值，咱們不就能夠在f1外部讀取它的內部變量了嗎！或許有人會有疑問，f2是一個函數啊，怎麼可以做爲f1函數的返回值返回呢，實際上是能夠的，JavaScript中的函數名自己就是變量，因此函數也能夠看成普通變量來使用。也就是說，不只能夠像傳遞參數同樣把一個函數傳遞給另外一個函數，並且能夠將一個函數做爲另外一個函數的返回值返回。

 1 function f1(){
 2 　　　　var n=999;//局部變量n
 3     //在f1函數內部聲明的f2函數
 4 　　　　function f2(){
 5 　　　　　　alert(n);
 6 　　　　}
 7 
 8 　　　　return f2;//將f2函數做爲f1函數的返回值
 9 　　}
10 　　var result=f1();//f1調用完後的返回值是一個f2函數，此時result就是f2函數
11 　　result(); // 999，調用f2函數

運行結果：

　　

3、閉包的概念

　　上一節代碼中的f2函數，就是閉包。各類專業文獻上的"閉包"（closure）定義很是抽象，好比有這樣的一個閉包定義："JavaScript閉包就是在另外一個做用域中保存了一份它從上一級函數或者做用域獲得的變量，而這些變量是不會隨上一級函數的執行完成而銷燬"，對於這樣的閉包定義，我是很難看懂。個人理解是，閉包就是可以讀取其餘函數內部變量的函數。因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成"定義在一個函數內部的函數"。因此，在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。

4、閉包的用途

　　閉包能夠用在許多地方。它的最大用處有兩個，一個是前面提到的能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中。

怎麼來理解這句話呢？請看下面的代碼。

 1     function f1(){
 2 　　　　var n=999;
 3         //nAdd是一個沒有使用var聲明的全局變量，這個變量如今指向了在f1函數內部聲明的一個匿名函數
 4 　　　　nAdd=function(){n+=1}
 5 　　　　function f2(){
 6 　　　　　　alert(n);
 7 　　　　}
 8 　　　　return f2;
 9 　　}
10 
11 　　var result=f1();//result就是f2函數
12 　　result();//第一次調用result函數 999
13 　　nAdd();//nAdd表明的就是在f1函數內部聲明的一個匿名函數，nAdd()就是在調用匿名函數
14 　　result();//第二次調用result函數 1000

運行結果：

　　

　　在這段代碼中，result實際上就是閉包f2函數。它一共運行了兩次，第一次的值是999，第二次的值是1000。這證實了，函數f1中的局部變量n一直保存在內存中，並無在f1調用後被自動清除。

　　爲何會這樣呢？緣由就在於f1是f2的父函數，而f2被賦給了一個全局變量，這致使f2始終在內存中，而f2的存在依賴於f1，所以f1也始終在內存中，不會在調用結束後，被垃圾回收機制（garbage collection）回收。

　　這段代碼中另外一個值得注意的地方，就是"nAdd=function(){n+=1}"這一行，首先在nAdd前面沒有使用var關鍵字，所以 nAdd是一個全局變量，而不是局部變量。其次，nAdd的值是一個匿名函數（anonymous function），而這個匿名函數自己也是一個閉包，因此nAdd至關因而一個setter，能夠在函數外部對函數內部的局部變量進行操做。

 5、使用閉包的注意點

　　1）因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。

　　2）閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

6、思考題

　　若是能理解下面兩段代碼的運行結果，應該就算理解閉包的運行機制了。

代碼片斷一：

 1 var name = "The Window";
 2 　　var object = {
 3 　　　　name : "My Object",
 4 　　　　getNameFunc : function(){
 5 　　　　　　return function(){
 6 　　　　　　　　return this.name;
 7 　　　　　　};
 8 　　　　}
 9 　　};
10 　　alert(object.getNameFunc()());

運行結果：

　　

代碼片斷二：

 1 var name = "The Window";
 2 　　var object = {
 3 　　　　name : "My Object",
 4 　　　　getNameFunc : function(){
 5 　　　　　　var that = this;
 6 　　　　　　return function(){
 7 　　　　　　　　return that.name;
 8 　　　　　　};
 9 　　　　}
10 　　};
11 　　alert(object.getNameFunc()()); 

運行結果：

　　

下面給代碼加上註釋，分析上述兩個代碼片斷的運行結果：

代碼片斷一：

分析以下：

 1     /*
 2     在JavaScript中，咱們聲明的JavaScript全局對象、全局函數以及全局變量均自動成爲window對象的成員。
 3     全局變量是window對象的屬性。
 4     全局函數是window對象的方法。
 5     */
 6     var name = "The Window";//聲明一個全局變量name，此時這個全局變量name就自動成爲了window對象的一個屬性
 7     //證實：
 8     alert("window.name："+window.name);//能用window.name(對象名.屬性名)的形式去訪問name，那麼就證實了這個全局變量name就自動成爲了window對象的一個屬性
 9     //聲明全局對象object，此時這個全局變量object就自動成爲了window對象的一個屬性
10     var object = {
11         　name : "My Object",//object對象的屬性name
12     　　　　getNameFunc : function(){//object對象的getNameFunc函數
13                 //object對象的getNameFunc方法的返回值是一個匿名函數
14     　　　　　　return function(){
15                     //此時這個this指的是哪一個對象呢，指的是window對象，哪一個對象調用this所在的函數，this指的就是哪一個對象。
16                     //證實匿名函數裏面的this表明的是window對象而不是object
17                     alert("this==object的結果是："+(this==object));
18                     alert("this==window的結果是："+(this==window));
19     　　　　　　　　return this.name;//既然this表明的是window對象，那麼this.name訪問的天然就是window對象的名字"The Window"
20     　　　　　　};
21     　　　　}
22     };
23     //證實：全局對象object是window對象的一個屬性
24     alert("window.object："+window.object);
25     alert("window.object.name："+window.object.name);
26     /*
27     調用完getNameFunc方法後，返回一個匿名方法，
28     此時retFn表明的就是匿名方法，如今至關於給匿名方法起了一個名字叫retFn，
29     此時的retFn函數自動成爲了window對象的一個函數
30     */
31     var retFn = object.getNameFunc();
32     alert(retFn());//調用返回的匿名方法，那麼是誰在調用這個匿名方法呢？是window對象
33     //證實：retFn函數是window對象的一個函數
34     alert("window.retFn()："+window.retFn());//能用window.retFn()(對象名.方法名)的形式去調用retFn方法，那麼就證實了retFn函數是window對象的一個函數

代碼片斷二：

分析以下：

 1     var name = "The Window";//全局變量name
 2     //全局對象object
 3     var object = {
 4 　　　　name : "My Object",
 5 
 6 　　　　getNameFunc : function(){
 7             /*
 8             此時這個this表明的是哪一個對象呢，this此時表明的是object對象，哪一個對象調用this所在的函數，this指的就是哪一個對象
 9             執行完that = this後，此時that也表明object對象
10             */
11             var that = this;//that是在getNameFunc函數裏面聲明的一個局部變量
12             //證實getNameFunc函數裏面的this表明的是object對象而不是window
13             alert("this==object的結果是："+(this==object));
14             alert("this==window的結果是："+(this==window));
15             //證實that表明的是object對象
16             alert("that==object的結果是："+(that==object));
17 　　　　　　return function(){
18             /*that是在getNameFunc函數裏面聲明的一個局部變量,
19             正常狀況下getNameFunc函數調用完成後，that這個局部變量就會被JavaScript的GC回收，釋放掉that這個局部變量所佔用的內存空間，
20             可是如今that卻能一直正常使用，沒有被回收，
21             緣由就在於getNameFunc是這個匿名函數的父函數，而getNameFunc函數調用完後會將這個匿名函數返回並被賦給了一個全局變量retFn，這致使匿名函數始終在內存中，
22             而匿名函數的存在依賴於getNameFunc函數，所以getNameFunc函數也始終在內存中，不會在調用結束後，被垃圾回收機制（garbage collection）回收。
23             既然getNameFunc函數始終在內存中，那麼在getNameFunc函數內部聲明的that局部變量在內存中也會一直存在，既然存在，那麼固然能夠繼續使用了。
24             */
25 　　　　　　　　return that.name;//that表明的是object對象，那麼that.name訪問的天然就是object對象的名字"My Object"
26 　　　　　　};
27 
28 　　　　}
29 
30 　　};
31     var retFn = object.getNameFunc();//調用完getNameFunc方法後，返回一個匿名方法，此時retFn表明的就是匿名方法，如今至關於給匿名方法起了一個名字叫retFn
32 　　alert(retFn()); 

 最後也附上一個我之前學習JavaScript閉包時寫的一個例子：

 1 <script type="text/javascript">
 2     function A(){
 3         var i = 0;//聲明在A函數內部的局部變量i
 4         //聲明在A函數的內部的子函數b
 5         function b(){
 6             alert("i = "+(++i));//在子函數b內部訪問聲明在A函數內部的局部變量i
 7         }
 8         return b;//返回b這個函數的地址
 9     }
10     /*
11     在執行完var c = A()後，變量c其實是指向了函數b,b中用到了變量i,
12     再執行c()後會彈出一個窗口顯示i的值(第一次爲1)，
13     這段代碼其實就是建立了一個閉包，
14     由於函數a外的變量c引用了函數a內部的函數b
15     也就是說：當函數a的內部函數b被函數a外的一個變量引用的時候，
16     就建立了一個所謂的"閉包"
17     閉包的做用就是在a執行完並返回後，
18     閉包使得JavaScript的垃圾回收機制GC不會收回a所佔用的資源，
19     由於a的內部函數b的執行須要依賴a中的變量
20     */
21     A();//此時內存中確定會有i的空間，當執行完A()以後，GC就會回收爲i分配的內存空間
22     var c = A();//這種用法，GC不會把i當成垃圾處理掉
23     c();//至關於調用b()，結果是：i=1
24     c();//結果是：i=2
25     c();//結果是：i=3
26   </script>

運行結果：

　　

　　以上就是對JavaScript閉包的總結，若是有寫得不對的地方，歡迎朋友們指出來，你們一塊兒共同進步！