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

閉包（closure）是Javascript語言的一個痛點，也是它的特色，很多進階應用程式都要依靠閉包實現。很早就接觸過閉包這個概念了，但是一直糊裡糊塗的，沒有能夠弄明白JavaScript的閉包到底是什麼，有什麼用，今天在網上看到了一篇講JavaScript閉包的文章(原文連結)，講得非常好，這下算是徹底明白了JavaScript的閉包到底是個神馬東東以及閉包的用途了，在此寫出來和大家分享一下，希望不理解JavaScript閉包的朋友們看了之後能夠理解閉包！以下內容大部分是來自原文，我在原文的基礎上加上一些代碼注釋和運行以及少許的修改，方便大家理解！ 一、變數的範圍 　　要理解閉包，首先必須理解Javascript特殊的變數範圍。 　　在JavaScript中，變數的範圍分兩種：全域變數和局部變數。 　　在Javascript中，在函數內部可以直接讀取全域變數。 1 var n=999;//定義全域變數n2 function f1(){3 　　alert("在函數內部訪問全域變數n，n="+n);//在函數內部訪問全域變數n4 }5 f1(); // 999運行結果： 　　　　 　　但是反過來則不行，在函數外部無法讀取函數內的局部變數。 1  function f1(){2  　　var n=999;//在f1函數內部定義局部變數n3  }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));運行結果： 　　 二、如何從外部讀取局部變數？ 　　出於種種原因，我們有時候需要得到函數內的局部變數。但是，前面已經說過了，正常情況下，這是辦不到的，只有通過變通方法才能實現。 那就是在函數的內部，再定義一個函數。 複製代碼1 function f1(){2 　　var n=999;//f1函數內部的局部變數n3     //在f1函數內部定義一個f2函數4 　　function f2(){5        //在f2函數內部是可以訪問局部變數n的6 　　　　alert(n); // 9997 　　}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函數複製代碼運行結果： 　　 三、閉包的概念 　　上一節代碼中的f2函數，就是閉包。各種專業文獻上的"閉包"（closure）定義非常抽象，比如有這樣的一個閉包定義："JavaScript閉包就是在另一個範圍中儲存了一份它從上一級函數或者範圍得到的變數，而這些變數是不會隨上一級函數的執行完成而銷毀"，對於這樣的閉包定義，我是很難看懂。我的理解是，閉包就是能夠讀取其他函數內部變數的函數。由於在Javascript語言中，只有函數內部的子函數才能讀取局部變數，因此可以把閉包簡單理解成"定義在一個函數內部的函數"。所以，在本質上，閉包就是將函數內部和函數外部串連起來的一座橋樑。 四、閉包的用途 　　閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變數，另一個就是讓這些變數的值始終保持在記憶體中。 怎麼來理解這句話呢？請看下面的代碼。 複製代碼 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函數 99913 　　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，可以在函數外部對函數內部的局部變數進行操作。  五、使用閉包的注意點 　　1）由於閉包會使得函數中的變數都被儲存在記憶體中，記憶體消耗很大，所以不能濫用閉包，否則會造成網頁的效能問題，在IE中可能導致記憶體泄露。解決方案是，在退出函數之前，將不使用的局部變數全部刪除。 　　2）閉包會在父函數外部，改變父函數內部變數的值。所以，如果你把父函數當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內部變數當作它的私人屬性（private value），這時一定要小心，不要隨便改變父函數內部變數的值。 六、思考題 　　如果能理解下面兩段代碼的運行結果，應該就算理解閉包的運行機制了。 程式碼片段一： 複製代碼 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對象的屬性name12     　　　　getNameFunc : function(){//object對象的getNameFunc函數13                 //object對象的getNameFunc方法的傳回值是一個匿名函數14     　　　　　　return function(){15                     //此時這個this指的是哪個對象呢，指的是window對象，哪個對象調用this所在的函數，this指的就是哪個對象。16                     //證明匿名函數裡面的this代表的是window對象而不是object17                     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對象而不是window13             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代表的就是匿名方法，現在相當於給匿名方法起了一個名字叫retFn32 　　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內部的函數b15     也就是說：當函數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=124     c();//結果是：i=225     c();//結果是：i=326   </script>複製代碼運行結果： 　　 　　以上就是對JavaScript閉包的總結，如果有寫得不對的地方，歡迎朋友們指出來，大家一起共同進步！