DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript的閉包和內存洩漏問題
JavaScript的閉包和內存洩漏問題
編輯:JavaScript基礎知識     

閉包

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 的監聽器。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved