JavaScript内存泄漏解释

Question

function addHandler() {  
    var el = document.getElementById('el');  
    el.onclick = function() {  
        this.style.backgroundColor = 'red';  
    }  
}

上面的代码包含在 Mozilla blog post on JavaScript 中并指出上述代码会导致内存泄漏。

谁能解释得更多:

Because the reference to el is inadvertently caught in the closure created for the anonymous inner function. This creates a circular reference between a JavaScript object (the function) and a native object (el).

谢谢!

Answer 1

根据我的解释，这本身并不是内存泄漏(有时如果没有这样的构造你就无法解决你的问题，但它们要复杂得多)，但这并不好，因为你创建了 onclick 函数每次都是新的，它保持到其父级的“链接”(闭包的作用)。这段代码会好得多；

function clickHandler(){
    this.style.backgroundColor = 'red';
}
function addHandler() {  
    var el = document.getElementById('el');  
    el.onclick = clickHandler           
}

这样，不会创建闭包，不会产生未使用的引用，也不会多次生成函数。