读书人

不理解闭包和事件绑定内存泄露有关问题

发布时间: 2012-03-20 14:01:11 作者: rapoo

不理解闭包和事件绑定内存泄露问题,有代码,右图,欢迎进来
[b]我不明白他的那个图到底是什么意思?怎么搞的作用域循环引用/b]

如果看不清图片的话,网页源地址:http://www.update8.com/Web/Javascript/11137_4.html

HTML code
< html >      < head >          < script language = “ JScript “ > function  AttachEvents(element)        {             //  This structure causes element to ref ClickEventHandler              element.attachEvent( “ onclick “ , ClickEventHandler); function  ClickEventHandler()            {                 //  This closure refs element                }        } function  SetupLeak()        {             //  The leak happens all at once             AttachEvents(document.getElementById( “ LeakedDiv “ ));        } </ script >      </ head > < body onload = “ SetupLeak() “   >          < div id = “ LeakedDiv “ ></ div >      </ body > </ html >

闭包的一个内部方法赋给了element对象,产生了一个作用域的循环引用,从而造成内存泄露。其原理图如下:

解决方案如下,在确定事件不再使用后,解除事件的绑定:


JScript code
function BreakLeak() { document.getElementById(”LeakedDiv”).detachEvent(”onclick”, document.getElementById(”LeakedDiv”).expandoClick);  document.getElementById(”LeakedDiv”).expandoClick = null; }

通常情况下,常用的js框架都帮我们解决了这个问题,不需要我们自己处理,这也是使用框架的一个好处。


[解决办法]
这张图应该是说函数AttachEvents包含一个dom的引用——document.getElementById( “ LeakedDiv “ ),而document.getElementById( “ LeakedDiv “ )这个dom元素又同时保持有AttachEvents函数的子函数ClickEventHandler的引用,这样就构成js对象(函数对象)和Native Object(dom对象)的循环引用,这种问题IE6处理不了,会造成内存泄露。
个人理解,仅供参考

读书人网 >JavaScript

热点推荐