为什么这是内存泄漏

Question

全部

我想知道为什么这是内存泄漏：

window.onload = function outerFunction(){
    var obj = document.getElementById("app")
    obj.onClick = function innerFunction(){
        alert("Hi, I will leak");
    }
}


<button id="app">Click Me</button>

上面的示例说：javaScript对象（obj）包含对DOM对象的引用（由ID“ app”引用）。 DOM元素又具有对javascript obj的引用，在javascript对象和DOM对象之间产生的循环引用会导致内存泄漏。

它说解决方案是： 在function outerFunction的末尾，设置obj = null

我的困惑是：

为什么说DOM引用了该obj？我不明白这。为什么这是内存泄漏？

Answer 1

以下文章较旧，这不再是问题

该问题在this article中进行了描述：

window.onload = function() {
    var obj = document.getElementById("element");

    // this creates a closure over "element"
    obj.onclick = function(evt) {
        ... logic ...
    };
};

  

这里是描述闭包的图，该闭包在DOM世界和JS世界之间创建了循环引用。

  

上述样式将因关闭而泄漏。这里，闭包的全局变量obj指的是DOM元素。同时，DOM元素包含对整个闭包的引用。这将在DOM和JS世界之间生成循环引用。那就是泄漏的原因。

来自the MDN web docs：闭包是函数和声明该函数的词法环境的组合。 在那种情况下，词法环境是window.onload函数，其中包括obj变量。