偉大的愛因斯坦同志說過:「如果你無法向一個 6 歲小孩解釋清楚某問題,那就表示你自己都沒整明白」。然而,當我向一個 27 歲的朋友解釋什麼是閉包時,卻徹底失敗了。
這原本是國外某哥們在 Stack Overflow 上對 JavaScript 閉包所提出的問題。不過既然此問題是在 Stack Overflow 提出的,當然也會有很多高手出來解答,其中有些回答確實是經典,如下面這個:
如果在一個外部函數中再定義一個內部函數,即函數巢狀函數,那麼內部函數也可以存取外部函數中的變數:
function foo(x) { var tmp = 3; function bar(y) { alert(x + y + (++tmp)); } bar(10); } foo(2); // alert 16 foo(2); // alert 16 foo(2); // alert 16
此段程式碼可以正確執行,並傳回結果:16,因為 bar 能存取外部函數的變數 tmp, 同時也能存取外部函數 foo 的參數 x。但以上範例不是閉包!
要實現閉包的話,需要將內部函數作為外部函數的返回值返回,內部函數在返回前,會將所有已訪問過的外部函數中的變量在內存中鎖定,也就是說,這些變量將常駐bar 的記憶體中,不會被垃圾回收器回收,如下:
function foo(x) { var tmp = 3; return function (y) { alert(x + y + (++tmp)); } } var bar = foo(2); // bar 现在是个闭包了 bar(10); // alert 16 bar(10); // alert 17 bar(10); // alert 18
上述程式碼中,第一次執行 bar 時,仍會傳回結果:16,因為 bar 仍可存取 x 及 tmp,儘管它已經不直接存在於 foo 的作用域內。那麼既然 tmp 被鎖在 bar 的閉包裡,那麼每次執行 bar 的時候,tmp 都會自增一次,所以第二次和第三次執行 bar 時,分別回傳 17 和 18。
此範例中,x 只是一個純粹的數值,當 foo 被呼叫時,數值 x 就會作為參數被拷貝至 foo 內。
但是JavaScript 處理物件的時候,使用的總是引用,如果用一個物件作為參數來呼叫foo,那麼foo 中傳入的其實就是原始物件的引用,所以這個原始物件也相當於被閉包了,如下:
function foo(x) { var tmp = 3; return function (y) { alert(x + y + tmp++); x.memb = x.memb ? x.memb + 1 : 1; alert(x.memb); } } var age = new Number(2); var bar = foo(age); // bar 现在是个闭包了 bar(10); // alert 15 1 bar(10); // alert 16 2 bar(10); // alert 17 3
和期望的一樣,每次執行 bar(10) 時,不但 tmp 自增了,x.memb 也自增了,因為函數體內的 x 和函數體外的 age 引用的是同一個物件。
via http://stackoverflow.com/questions/111102/how-do-javascript-closures-work
補充:透過以上範例,應該能比較清楚的理解閉包了。如果覺得自己理解了,可以試著猜猜看下面這段程式碼的執行結果:
function foo(x) { var tmp = 3; return function (y) { alert(x + y + tmp++); x.memb = x.memb ? x.memb + 1 : 1; alert(x.memb); } } var age = new Number(2); var bar1 = foo(age); // bar1 现在是个闭包了 bar1(10); // alert 15 1 bar1(10); // alert 16 2 bar1(10); // alert 17 3 var bar2 = foo(age); // bar2 现在也是个闭包了 bar2(10); // alert ? ? bar2(10); // alert ? ? bar2(10); // alert ? ? bar1(10); // alert ? ? bar1(10); // alert ? ? bar1(10); // alert ? ?
實際使用的時候,閉包可以創造出非常優雅的設計,允許對funarg上定義的多種計算方式進行自訂。如下就是數組排序的例子,它接受一個排序條件函數作為參數:
[1, 2, 3].sort(function (a, b) { ... // 排序条件 });
同樣的例子還有,數組的map方法是根據函數中定義的條件將原始數組映射到一個新的數組:
[1, 2, 3].map(function (element) { return element * 2; }); // [2, 4, 6]
使用函數式參數,可以很方便的實作一個搜尋方法,並且可以支援無限制的搜尋條件:
someCollection.find(function (element) { return element.someProperty == 'searchCondition'; });
還有應用函數,例如常見的forEach方法,將函數應用到每個陣列元素:
[1, 2, 3].forEach(function (element) { if (element % 2 != 0) { alert(element); } }); // 1, 3
順便提下,函數物件的 apply 和 call方法,在函數式程式設計中也可以用作應用函數。 這裡,我們將它們視為應用函數 —— 應用到參數中的函數(在apply中是參數列表,在call中是獨立的參數):
(function () { alert([].join.call(arguments, ';')); // 1;2;3 }).apply(this, [1, 2, 3]);
閉包還有另外一個很重要的應用 —— 延遲呼叫:
var a = 10; setTimeout(function () { alert(a); // 10, after one second }, 1000); 还有回调函数: //... var x = 10; // only for example xmlHttpRequestObject.onreadystatechange = function () { // 当数据就绪的时候,才会调用; // 这里,不论是在哪个上下文中创建 // 此时变量“x”的值已经存在了 alert(x); // 10 }; //...
也可以建立封裝的作用域來隱藏輔助物件:
var foo = {}; // 初始化 (function (object) { var x = 10; object.getX = function _getX() { return x; }; })(foo); alert(foo.getX()); // 获得闭包 "x" – 10