为什么 Internet Explorer 8 中会出现此泄漏？

为什么下面的代码会泄漏？

for (var i = 0; i < 100; i++) {
    var item = {};
    item.elem = document.createElement('div');
    document.body.appendChild(item.elem);
    item.addEvent = function(name,listener) {
        var self = this;
        var wrappedListener = function() {
            return listener.apply(self,arguments);
        }
        //Uh-oh creating a circular reference here!
        //The wrappedListener has a closure on self and therefore on item.elem.
        addEvent(this.elem,name,wrappedListener);
        return wrappedListener;
    }
    var wrap = item.addEvent('eventName',listen);

    //Now remove the eventHandler - this should free up the circular reference.
    removeEvent(item.elem, 'eventName', wrap);
    if (item.elem.parentNode) {
        item.elem.parentNode.removeChild(item.elem);
    }
    //item.elem = null; //With this also un-commented, the leak disappears.
    //The fact that I have to null item.elem tells me that something is holding
    //a reference to item, and therefore elem. Setting elem to null fixes the
    //problem, but since I am removing the event handler, I don't think this
    //should be required.
}

Note: addEvent and removeEvent只是抽象attachEvent/addEventListenerInternet Explorer 和其他浏览器之间的差异。

我创建了一个jsFiddle http://jsfiddle.net/演示问题的项目。只需启动 Internet Explorer 8 并观察它在任务管理器或进程资源管理器中的运行情况。此外，您还会看到以下定义addEvent and removeEvent there.

http://jsfiddle.net/rJ8x5/34/ http://jsfiddle.net/rJ8x5/34/

编辑：嗯，我想出了以下解决方案。它不漂亮，但是很有效！http://jsfiddle.net/rJ8x5/43/ http://jsfiddle.net/rJ8x5/43/

var item = {};
item.elem = document.createElement('div');
document.body.appendChild(item.elem);
item.addEvent = function(name,listener) {
    var wrappedListener = function() {
        //Access the scope through the callee properties.
        return listener.apply( arguments.callee.scope, arguments);
    }
    addEvent(this.elem,name,wrappedListener);
    //Save the scope not as a closure, but as a property on the handler.
    wrappedListener.scope = this
    return wrappedListener;
}
var wrap = item.addEvent('eventName',listen);
removeEvent(item.elem, 'eventName', wrap);
//Force the circular reference to GO AWAY.
wrap.scope = null
if (item.elem.parentNode) {
    item.elem.parentNode.removeChild(item.elem);
}
//item.elem = null; //No longer needed.

问题在于事件（顺便说一句，在 Internet Explorer 中几乎总是如此）。

Look at http://jsfiddle.net/rJ8x5/39/ http://jsfiddle.net/rJ8x5/39/并注意它如何很好地收集垃圾。

当您附加事件时，您正在创建循环引用。阅读更多相关信息HTML 页面上对 DOM 对象的循环引用会导致内存泄漏 http://support.microsoft.com/kb/830555.