Javascript教程：关于内存泄漏问题(2)

还有这个例子在IE 6中同样原因会引起泄露

function  leakmaybe() {
var  elm  =  document.createElement("DIV");
     elm.onclick  =  function(){
         return   2   +   2 ;
     }
}
for( var  i = 0 ;i < 10000;i ++){
  leakmaybe();
}

关于Closure的知识，大家可以看看 这篇文章 ，习惯中文也可以看看zkjbeyond的blog，他对Closure 这篇文章进行了 简要的翻译 。之所以会有这一系列的问题，关键就在于javascript是种函数式脚本解析语言，因此javascript中“函数中的变量的作用域是定义作用域，而不是动态作用域”，这点在犀牛书《JavaScript: The Definitive Guide》中的“Funtion”一章中有所讨论。

http://support.microsoft.com/default.aspx?scid=KB;EN-US;830555中也对这个问题举了很详细的例子。

一些简单的解决方案

目前大多数ajax前端的javascript framework都利用对事件的管理，解决了该问题。

如果你需要自己解决这个问题，可以参考以下的一些方法：

http://outofhanwell.com/ieleak/index.php?title=Main_Page:有个不错的检测工具

http://youngpup.net/2005/0221010713 中提到：可以利用递归Dom树，解除event绑定，从而解除循环引用：

if (window.attachEvent){         
    var clearElementProps = ['data','onmouseover','onmouseout','onmousedown','onmouseup',
'ondblclick','onclick','onselectstart','oncontextmenu'];         
   
    window.attachEvent("onunload", function(){            
        var el;
        for(var d = document.all.length;d--;){                 
            el = document.all[d];                 
                for(var c = clearElementProps.length;c--;){                     
                    el[clearElementProps[c]] = null;                 
                }             
            }         
        }
    );     
}

而http://novemberborn.net/javascript/event-cache一文中则通过增加EventCache，从而给出一个相对结构化的解决方案

/*    
    EventCache Version 1.0
    Copyright 2005 Mark Wubben
    Provides a way for automagically removing events from nodes and thus preventing memory leakage.
    See <http://novemberborn.net/javascript/event-cache> for more information.
   
    This software is licensed under the CC-GNU LGPL <http://creativecommons.org/licenses/LGPL/2.1/>
*/
/* 
    Implement array.push for browsers which don't support it natively.
    Please remove this if it's already in other code 
*/
if (Array.prototype.push == null ){
    Array.prototype.push =  function (){
         for (var i = 0;i<arguments.length;i ++){
             this[this.length] = arguments[i];
         };
         return this.length;
    };
};
/*    
    Event Cache uses an anonymous function to create a hidden scope chain.
    This is to prevent scoping issues. 
*/
var EventCache = function (){
     var listEvents=[];
     return{
        listEvents : listEvents,
   
        add: function(node, sEventName, fHandler, bCapture){
            listEvents.push(arguments);
        },
   
        flush: function (){
             var i,item;
             for (i = listEvents.length-1;i>=0;i=i-1 ){
                item=listEvents[i];
                if(item[0].removeEventListener){
                    item[0].removeEventListener(item[1],item[2],item[3]);
                };
               
                /* From this point on we need the event names to be prefixed with 'on"  */
                if(item[1].substring(0, 2)!="on" ){
                    item[1]="on"+item[1];
                };
               
                if(item[0].detachEvent){
                    item[0].detachEvent(item[1], item[2]);
                };
               
                item[0][item[1]]=null;
            };
        }
    };
}();

使用方法也很简单：

<script type="text/javascript">
function addEvent(oEventTarget,sEventType,fDest){       
if(oEventTarget.attachEvent){       
     oEventTarget.attachEvent("on" + sEventType, fDest);   
}
elseif(oEventTarget.addEventListener){       
     oEventTarget.addEventListener(sEventType, fDest, true);    
}
elseif(typeof oEventTarget[sEventType]=="function"){               
     var fOld = oEventTarget[sEventType];       
     oEventTarget[sEventType] = function(e){
         fOld(e);
         fDest(e);
     };   
}
else {       
     oEventTarget[sEventType] = fDest;   
};
   
/* Implementing EventCache for all event systems */   
EventCache.add(oEventTarget, sEventType, fDest, true);};
function createLeak(){        
     var body = document.body;   
     function someHandler(){              
         return body;   
     };   
         addEvent(body, "click", someHandler);
};
    
window.onload = function(){      
     var i = 500;      
     while(i > 0){       
          createLeak();       
          i = i - 1;
     }
};
    
window.onunload = EventCache.flush;
</script>