Javascript关闭:内存泄漏

Question

我有一个内存泄漏,我不明白.我编写了一个机制来处理事件,半自动解除绑定,这可以让我轻松地清理内存.但在一种情况下,清理不会发生(我使用chrome的"profile(内存堆)"来检查"EventHandler"左侧的实例).我真的不明白为什么会这样.关闭时有些奇怪......

用chrome看看它的实际效果

function Bind(obj, f) {
    return function() {
        return f.apply(obj, arguments);
    }
}

function EventHandler() {
    this.listeners = new Object();

    var _listenerID = 0;
    this.addListener = function(e, obj, listener, specialDisplay) {
        if (typeof(listener) === "function") {
            var listenerID = ++_listenerID;
            console.log("Events (" + (++EventHandler.All) + ", " + listenerID + ") ++" + e);

            if (!this.listeners.hasOwnProperty(e)) {
                this.listeners[e] = new Object();
            }
            this.listeners[e][listenerID] = listener;

            if (obj != null && typeof(obj.removeListener) == "function") {
                var deleteListenerID = obj.addListener("Delete", null, Bind(this, function() {
                    this.removeListener(e, listenerID);
                    obj.removeListener("Delete", deleteListenerID);
                }));
            }

            return listenerID;
        }

        return null;
    }
    this.fire = function(e, obj) {
        if (this.listeners.hasOwnProperty(e)) {
            for(var i in this.listeners[e]) {
                this.listeners[e][i](obj);
            }
        }
    }
    this.removeListener = function(e, listenerID) {
        if (this.listeners.hasOwnProperty(e) && this.listeners[e].hasOwnProperty(listenerID)) {
            delete this.listeners[e][listenerID];

            console.log("Events (" + (--EventHandler.All) + ", " + listenerID + ") --" + e);
        }
    }
}

EventHandler.All = 0;

function Loader() {
}

Loader.files = new Object();

Loader.LoadImage = function(src, f) {
    if (!Loader.files.hasOwnProperty(src)) {
        var handler = new EventHandler();

        console.log("Loading.... (" + src + ")");

        Loader.files[src] = function(fnct) {
            handler.addListener("ImageLoaded", handler, function(img) {
                fnct(img);
            });
        }

        handler.addListener("ImageLoaded", handler, function() {
            Loader.files[src] = function(fnct) {
                fnct(img);
            }
        });     

        var img = new Image();
        $(img).load(function() {
            console.log("Loaded.... (" + src + ")");
            handler.fire("ImageLoaded", img);
            handler.fire("Delete");
            $(img).unbind('load');
        });
        img.src = src;
    }

    Loader.files[src](f);
}

Loader.LoadImage("http://serge.snakeman.be/Demo/house.jpg", function() { alert("ok"); });

Answer 1

EventHandler您创建通过变量保存对实例的引用的闭包handler。加载图像后仍保留其中一个闭包：

    handler.addListener("ImageLoaded", handler, function() {
        Loader.files[src] = function(fnct) {
            fnct(img);
        }
    });     

这是内部函数function(fnct) {...。EventHandler只要闭包存在，的实例就无法被释放。你唯一的解决办法就是摆脱这种封闭。或者，如果可能的话，您可以手动释放实例。以下内容可能对您有用：

handler.fire("Delete");
handler = undefined;

Chrome 的内存分析器会向您显示对象的保留树，这只是表达“谁持有该对象的引用”的另一种方式。在您的示例中，它是EventHandler <- handler (LoadImage 方法的变量，由闭包合并) <- house.jpg，它实际上是Loader.files[src]并且具有值function(fnct) { fnct(img); }。