其實關於閉包各個論壇社群裡都有很多的文章來講它，畢竟閉包是JavaScript中一個特色，也正因為這個雨中不同的特色也讓閉包理解起來有一些吃力。筆者在這裡不僅僅是想介紹閉包，也向列舉一些筆者所見過的一些閉包，如果有讀者還有一些比較經典的閉包例子，希望可以在評論區裡留一下，謝謝。
說了半天，究竟什麼是閉包呢？
- 閉包就是函式的區域性變數集合，只是這些區域性變數在函式返回後會繼續存在。
- 閉包就是就是函式的“堆疊”在函式返回後並不釋放，我們也可以理解為這些函式堆疊並不在棧上分配而是在堆上分配。
- 當在一個函式內定義另外一個函式就會產生閉包。
為了便於理解，我們可以簡單的將閉包理解為：
- 閉包：是指有權訪問另外一個函式作用域中的變數的函式。
JavaScript中的作用域
JavaScript中是沒有塊級作用域的。不過關於塊級作用域我們在這裡不做深入探究，筆者在JavaScript的作用域和塊級作用域概念理解中有對塊級作用域較為詳細的解釋，不懂的讀者可以去看看。
變數的作用域無非就是兩種：全域性變數和區域性變數。
Javascript語言的特殊之處，就在於函式內部可以直接讀取全域性變數。
|
1 2 3 4 5 |
var n=999; function f1(){ alert(n); } f1(); // 999 |
如上函式，f1可呼叫全域性變數n
另一方面，在函式外部自然無法讀取函式內的區域性變數。
|
1 2 3 4 |
function f1(){ var n=999; } alert(n); // error |
這裡有一個地方需要注意，函式內部宣告變數的時候，一定要使用var命令。如果不用的話，你實際上宣告瞭一個全域性變數。
|
1 2 3 4 5 |
function f1(){ n=999; } f1(); alert(n); // 999 |
閉包
1.理解閉包
我們已經理解了什麼是作用域，什麼是塊級作用域，那又該如何去訪問函式內部的變數呢？
出於種種原因，我們有時候需要得到函式內的區域性變數。但是，前面已經說過了，正常情況下，這是辦不到的，只有通過變通方法才能實現。
|
1 2 3 4 5 6 7 8 9 |
function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result();// 彈出999 |
上面函式中的f2函式就是閉包，就是通過建立函式來訪問函式內部的區域性變數。
2.閉包的用途
閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函式內部的變數，另一個就是讓這些變數的值始終保持在記憶體中。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function f1(){ var n=999; nAdd=function(){n+=1} function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999 nAdd(); 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，可以在函式外部對函式內部的區域性變數進行操作。
3.閉包的注意點
1）由於閉包會使得函式中的變數都被儲存在記憶體中，記憶體消耗很大，所以不能濫用閉包，否則會造成網頁的效能問題，在IE中可能導致記憶體洩露。解決方法是，在退出函式之前，將不使用的區域性變數全部刪除。
2）閉包會在父函式外部，改變父函式內部變數的值。所以，如果你把父函式當作物件（object）使用，把閉包當作它的公用方法（Public Method），把內部變數當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函式內部變數的值。
4.經典閉包小案例
如果你能理解下面全部的案例，那你的閉包就算是真正掌握了。
|
1 2 3 4 5 6 7 8 9 |
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ return function(){ return this.name; }; } }; alert(object.getNameFunc()());//The Window |
|
1 2 3 4 5 6 7 8 9 10 11 |
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ var that = this; return function(){ return that.name; }; } }; alert(object.getNameFunc()());//My Object |
|
1 2 3 4 5 6 7 8 9 10 11 |
function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); } }; } var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,? var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,? var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,?,?,? |
//問:三行a,b,c的輸出分別是什麼？
這是一道非常典型的JS閉包問題。其中巢狀了三層fun函式，搞清楚每層fun的函式是那個fun函式尤為重要。
//答案：
//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1
都答對了麼？如果都答對了恭喜你在js閉包問題當中幾乎沒什麼可以難住你了。
參考
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
