JavaScript中必須提到的功能最強大的抽象概念之一:閉包。它究竟是做什麼的呢?
function makeAdder(a) { return function(b) { return a + b; } } var x = makeAdder(5); var y = makeAdder(20); x(6); // 11 y(7); // 27
makeAdder這個名字本身應該能說明函數是用來做什麼的:他創建了一個新的adder函數,這個函數自身帶有一個參數,它被調用的時候這個參數會被加載在外層函數傳進來的參數上。
這裡發生的事情和前面介紹過的內嵌函數十分相似:一個函數被定義在了另外一個函數的內部,內部函數可以訪問外部函數的變量。唯一的不同是,外部函數被返回了,那麼常識告訴我們局部變量“應該”不再存在。但是它們卻仍然存在——否則 adder
函數將不能工作。也就是說,這裡存在makeAdder
的局部變量的兩個不同的“副本”——一個是 a
等於5,另一個是 a
等於20。運行結果就是一個是11一個是27。
下面來說說到底發生了什麼。當JavaScript執行一個函數時,都會創建一個作用域對象(scope object),用來保存在這個函數中創建的局部變量。他和被傳入函數的變量一起被初始化。這與那些保存的所有全部變量和函數的全局變量(global object)類似,但仍有很重要的區別,第一,每次函數被執行的時候,就會創建一個新的,特定的作用域對象;第二,與全局對象(在浏覽器裡面是當做window對象來訪問的)不同的是,你不能從JavaScript代碼中直接訪問作用與對象,也沒有可以遍歷當前作用與對象裡面屬性的方法。
所以當調用 makeAdder
時,解釋器創建了一個作用域對象,它帶有一個屬性:a
,這個屬性被當作參數傳入 makeAdder
函數。然後 makeAdder
返回一個新創建的函數。通常 JavaScript 的垃圾回收器會在這時回收 makeAdder
創建的作用域對象,但是返回的函數卻保留一個指向那個作用域對象的引用。結果是這個作用域對象不會被垃圾回收器回收,直到指向 makeAdder
返回的那個函數對象的引用計數為零。
作用域對象組成了一個名為作用域鏈(scope chain)的鏈。它類似於原形(prototype)鏈一樣,被 JavaScript 的對象系統使用。
一個閉包就是一個函數和被創建的函數中的作用域對象的組合。
閉包允許你保存狀態——所以它們通常可以代替對象來使用。
使用閉包的一個壞處是,在 IE 浏覽器中它會很容易導致內存洩露。JavaScript是一種具有垃圾回收機制的語言——對象在創建時分配內存,然後當值想這個對象的引用計數為零時,浏覽器會回收內存。宿主環境提供的對象都是按照這種方法被處理的。
浏覽器主機需要處理大量的對象來描繪一個正在被展現的HTML頁面——DOM對象。浏覽器負責管理他們的內存分配和回收。
IE浏覽器有自己一套垃圾回收機制,這套機制與JavaScript提供的垃圾回收機制交互時,可能發生內存洩漏。
在IE中,每當在一個JavaScript對象和一個本地對象之間形成循環引用時就會發生內存洩漏。如下所示:
function leakMemory() { var el = document.getElementById('el'); var o = { 'el': el }; el.o = o; }
這段代碼的循環引用會導致內存洩露:IE 不會釋放被 el
和 o
使用的內存,直到浏覽器被徹底關閉並重啟後。
這個例子往往無法引起人們的重視:一般只會在長時間運行的應用程序中,或者因為巨大的數據量和循環中導致內存洩露發生時,內存洩露才會引起注意。
不過一般也很少發生如此明顯的內存洩露現象——通常洩露的數據結構有多層的引用(references),往往掩蓋了循環引用的情況。
閉包很容易發生無意識的內存洩露。如下所示:
function addHandler() { var el = document.getElementById('el'); el.onclick = function() { el.style.backgroundColor = 'red'; } }
這段代碼創建了一個元素,當它被點擊的時候變紅,但同時它也會發生內存洩露。為什麼?因為對el
的引用不小心被放在一個匿名內部函數中。這就在 JavaScript 對象(這個內部函數)和本地對象之間(el
)創建了一個循環引用。
這個問題有很多種解決方法,最簡單的一種是不要使用 el
變量:
function addHandler(){ document.getElementById('el').onclick = function(){ this.style.backgroundColor = 'red'; }; }
有趣的是,有一種竅門解決因閉包而引入的循環引用,是添加另外一個閉包:
function addHandler() { var clickHandler = function() { this.style.backgroundColor = 'red'; }; (function() { var el = document.getElementById('el'); el.onclick = clickHandler; })(); }
內部函數被直接執行,並在 clickHandler
創建的閉包中隱藏了它的內容。
另外一種避免閉包的好方法是在 window.onunload
事件發生期間破壞循環引用。很多事件庫都能完成這項工作。注意這樣做將使 Firefox 中的 bfcache 無法工作。所以除非有其他必要的原因,最好不要在 Firefox 中注冊一個unload
的監聽器。