Javascript关闭：内存泄漏

Question

我有内存泄漏，我不明白。我编写了一个机制来处理半自动解除绑定的事件，这可以让我轻松地清理内存。 但在一种情况下，清理不会发生（我使用chrome的“配置文件（内存堆）”来检查“EventHandler”左侧的实例）。我真的不明白为什么会发生。有一些奇怪的与封闭...

see it in action with 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

创建持有经handler变量的引用到EventHandler实例关闭。其中一个封闭的保持图像加载后：

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

它的内部函数function(fnct) {...。只要闭包存在，EventHandler的实例就不能被释放。你唯一的解决方案是摆脱封闭。或者如果可能的话，手动释放实例。下面会为你工作：

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

Chrome的内存分析器会显示该对象的保留树，这只是另一种说法：“谁持有的引用对象”。在你的例子是事件处理器 < - 处理程序（如并入由封闭所述的LoadImage方法的变量）< - house.jpg，这实际上是Loader.files[src]和具有值function(fnct) { fnct(img); }。

Answer 2

在添加“侦听器”时，如果长时间使用查询，请确保删除它。

this.listeners = new Object(); 

或

this.listeners[e] = new Object(); 

这将到收听者添加对象作为数组，但没有在任何点移除它们。

这可能是内存消耗的原因。它可能不会泄漏，它的对象分配。使用浏览器消耗你的RAM。 :)