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。 :)