首頁 > 開發者 > JavaScript
作者：
Abhijeet Bhattacharya (abhbhatt@in.ibm.com), 系統軟體工程師, IBM India
Kiran Shivarama Shivarama Sundar (kisundar@in.ibm.com), 系統軟體工程師, IBM India
2007 年 5 月 28 日
如果您知道記憶體流失的起因，那麼在 JavaScript 中進行相應的防範就應該相當容易。在這篇文章中，作者 Kiran Sundar 和 Abhijeet Bhattacharya 將帶您親曆 JavaScript 中的循環參考的全部基本知識，向您介紹為何它們會在某些瀏覽器中產生問題，尤其是在結合了閉包的情況下。在瞭解了您應該引起注意的常見記憶體流失模式之後，您還將學到應對這些泄漏的諸多方法。
JavaScript 是用來向 Web 頁面添加動態內容的一種功能強大的指令碼語言。它尤其特別有助於一些日常任務，比如驗證密碼和建立動態菜單組件。JavaScript 易學易用，但卻很容易在某些瀏覽器中引起記憶體的泄漏。在這個介紹性的文章中，我們解釋了 JavaScript 中的泄漏由何引起，展示了常見的記憶體流失模式，並介紹了如何應對它們。
注意本文假設您已經非常熟悉使用 JavaScript 和 DOM 元素來開發 Web 應用程式。本文尤其適合使用 JavaScript 進行 Web 應用程式開發的開發人員，也可供有興趣建立 Web 應用程式的客戶提供瀏覽器支援以及負責瀏覽器故障排除的人員參考。
JavaScript 中的記憶體流失
JavaScript 是一種垃圾收集式語言，這就是說，記憶體是根據對象的建立分配給該對象的，並會在沒有對該對象的引用時由瀏覽器收回。JavaScript 的垃圾收集機制本身並沒有問題，但瀏覽器在為 DOM 對象分配和恢複記憶體的方式上卻有些出入。
Internet Explorer 和 Mozilla Firefox 均使用引用計數來為 DOM 對象處理記憶體。在引用計數系統，每個所引用的對象都會保留一個計數，以獲悉有多少對象正在引用它。如果計數為零，該對象就會被銷毀，其佔用的記憶體也會返回給堆。雖然這種解決方案總的來說還算有效，但在循環參考方面卻存在一些盲點。
循環參考的問題何在？
當兩個對象互相引用時，就構成了循環參考，其中每個對象的引用計數值都被賦 1。在純垃圾收集系統中，循環參考問題不大：若涉及到的兩個對象中的一個對象被任何其他對象引用，那麼這兩個對象都將被垃圾收集。而在引用計數系統，這兩個對象都不能被銷毀，原因是引用計數永遠不能為零。在同時使用了垃圾收集和引用計數的混合系統中，將會發生泄漏，因為系統不能正確識別循環參考。在這種情況下，DOM 對象和 JavaScript 對象均不能被銷毀。清單 1 顯示了在 JavaScript 對象和 DOM 對象間存在的一個循環參考。
清單 1. 循環參考導致了記憶體流失
<html> <body> <script type="text/javascript"> document.write("circular references between JavaScript and DOM!"); var obj; window.onload = function(){obj=document.getElementById("DivElement"); document.getElementById("DivElement").expandoProperty=obj; obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX")); }; </script> <div id="DivElement">Div Element</div> </body> </html> |
如上述清單中所示，JavaScript 對象 obj 擁有到 DOM 對象的引用，表示為 DivElement。而 DOM 對象則有到此 JavaScript 對象的引用，由 expandoProperty 表示。可見，JavaScript 對象和 DOM 對象間就產生了一個循環參考。由於 DOM 對象是通過引用計數管理的，所以兩個對象將都不能銷毀。
另一種記憶體流失模式
在清單 2 中，通過調用外部函數 myFunction 建立循環參考。同樣，JavaScript 對象和 DOM 對象間的循環參考也會導致記憶體流失。
清單 2. 由外部函數調用引起的記憶體流失
<html><head><script type="text/javascript">document.write(" object s between JavaScript and DOM!");function myFunction(element){this.elementReference = element;// This code forms a circular reference here//by DOM-->JS-->DOMelement.expandoProperty = this;}function Leak() {//This code will leaknew myFunction(document.getElementById("myDiv"));}</script></head><body onload="Leak()"><div id="myDiv"></div></body></html> |
正如這兩個程式碼範例所示，循環參考很容易建立。在 JavaScript 最為方便的編程結構之一：閉包中，循環參考尤其突出。
JavaScript 中的閉包
JavaScript 的過人之處在於它允許函數嵌套。一個嵌套的內建函式可以繼承外部函數的參數和變數，並由該外部函數私人。清單 3 顯示了內建函式的一個樣本。
清單 3. 一個內建函式
function parentFunction(paramA){ var a = paramA; function childFunction() {return a + 2; } return childFunction();} |
JavaScript 開發人員使用內建函式來在其他函數中整合小型的實用函數。如清單 3 所示，此內建函式 childFunction 可以訪問外部函數 parentFunction 的變數。當內建函式獲得和使用其外部函數的變數時，就稱其為一個閉包。
瞭解閉包
考慮如清單 4 所示的程式碼片段。
清單 4. 一個簡單的閉包
<html><body><script type="text/javascript">document.write("Closure Demo!!");window.onload=function closureDemoParentFunction(paramA){ var a = paramA; return function closureDemoInnerFunction (paramB) { alert( a +" "+ paramB); };};var x = closureDemoParentFunction("outer x");x("inner x");</script></body></html> |
在上述清單中，closureDemoInnerFunction 是在父函數 closureDemoParentFunction 中定義的內建函式。當用外部的 x 對 closureDemoParentFunction 進行調用時，外部函數變數 a 就會被賦值為外部的 x。函數會返回指向內建函式 closureDemoInnerFunction 的指標，該指標包括在變數 x 內。
外部函數 closureDemoParentFunction 的本地變數 a 即使在外部函數返回時仍會存在。這一點不同於 C/C++ 這樣的程式設計語言，在 C/C++ 中，一旦函數返回，本地變數也將不複存在。在 JavaScript 中，在調用 closureDemoParentFunction 的時候，帶有屬性 a 的範圍對象將會被建立。該屬性包括值 paramA，又稱為“外部 x”。同樣地，當 closureDemoParentFunction 返回時，它將會返回內建函式 closureDemoInnerFunction，該函數包括在變數 x 中。
由於內建函式持有到外部函數的變數的引用，所以這個帶屬性 a 的範圍對象將不會被垃圾收集。當對具有參數值 inner x 的 x 進行調用時，即 x("inner x")，將會彈出警告訊息，表明 “outer x innerx”。
清單 4 簡要解釋了 JavaScript 閉包。閉包功能非常強大，原因是它們使內建函式在外部函數返回時也仍然可以保留對此外部函數的變數的訪問。不幸的是，閉包非常易於隱藏 JavaScript 對象 和 DOM 對象間的循環參考。
閉包和循環參考
在清單 5 中，可以看到一個閉包，在此閉包內，JavaScript 對象（obj）包含到 DOM 對象的引用（通過 id "element" 被引用）。而 DOM 元素則擁有到 JavaScript obj 的引用。這樣建立起來的 JavaScript 對象和 DOM 對象間的循環參考將會導致記憶體流失。
清單 5. 由事件處理引起的記憶體流失模式
<html><body><script type="text/javascript">document.write("Program to illustrate memory leak via closure");window.onload=function outerFunction(){var obj = document.getElementById("element");obj.onclick=function innerFunction(){alert("Hi! I will leak");};obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));// This is used to make the leak significant};</script><button id="element">Click Me</button></body></html> |
避免記憶體流失
幸好，JavaScript 中的記憶體流失是可以避免的。當確定了可導致循環參考的模式之後，正如我們在上述章節中所做的那樣，您就可以開始著手應對這些模式了。這裡，我們將以上述的 由事件處理引起的記憶體流失模式 為例來展示三種應對已知記憶體流失的方式。
一種應對 清單 5 中的記憶體流失的解決方案是讓此 JavaScript 對象 obj 為空白，這會顯式地打破此循環參考，如清單 6 所示。
清單 6. 打破循環參考
<html><body><script type="text/javascript">document.write("Avoiding memory leak via closure by breaking the circular reference");window.onload=function outerFunction(){var obj = document.getElementById("element");obj.onclick=function innerFunction(){alert("Hi! I have avoided the leak");// Some logic here};obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));obj = null; //This breaks the circular reference};</script><button id="element">"Click Here"</button></body></html> |
清單 7 是通過添加另一個閉包來避免 JavaScript 對象和 DOM 對象間的循環參考。
清單 7. 添加另一個閉包
<html><body><script type="text/javascript">document.write("Avoiding a memory leak by adding another closure"); window.onload=function outerFunction(){var anotherObj = function innerFunction() {// Some logic herealert("Hi! I have avoided the leak"); }; (function anotherInnerFunction(){var obj = document.getElementById("element");obj.onclick=anotherObj })(); };</script><button id="element">"Click Here"</button></body></html> |
清單 8 則通過添加另一個函數來避免閉包本身，進而阻止了泄漏。
清單 8. 避免閉包自身
<html><head><script type="text/javascript">document.write("Avoid leaks by avoiding closures!");window.onload=function(){var obj = document.getElementById("element");obj.onclick = doesNotLeak;}function doesNotLeak(){//Your Logic herealert("Hi! I have avoided the leak");}</script></head><body><button id="element">"Click Here"</button></body></html> |
結束語
本文解釋了循環參考是如何導致 JavaScript 中的記憶體流失的 —— 尤其是在結合了閉包的情況下。您還瞭解了涉及到循環參考的一些常見記憶體流失模式以及應對這些泄漏模式的幾種簡單方式。
作者簡介
Abhijeet Bhattacharya 是 IBM 印度軟體實驗室的一名系統工程師。在過去三年中，他一直是 OS/2 IBM Web Browser 支援小組中的一員。他也具有系統管理領域的相關經驗，並參與過 IBM Pegasus 開源創新項目。他目前工作的重點包括分散式運算和 SARPC。他擁有 Rajiv Gandhi Technical University 的工程學士學位。 |
||
Kiran Shivarama Sundar 是 IBM 印度軟體實驗室的一名系統工程師。在過去三年中，他一直是 OS/2 IBM Web Browser 支援小組中的一員。他同時也具有諸多其他項目的工作經驗，包括為 Apache Tuscany Open Source Project 開發命令列工具以及為 IBM 的 EPCIS 團隊開發 RFIDIC Installer。目前，Kiran 加入了 IBM WebSphere Adapters 支援小組，負責提供對 JMS 和 MQ 適配器的支援。他已成功獲得了 Sun Certified Java Programmer、Sun Certified Web Component Developer 和 Sun Certified Business Component Developer 的認證。他目前所關注的領域包括 Java、J2EE、Web 服務和 SOA。他擁有 Visweshwaraya Technology University 的工程學士學位。 |
||
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
