执行事件处理函数会导致内存泄漏，这是指引用了一个外部作用域元素

Question

做事件处理函数会导致内存泄漏，即元素在外作用域

例如：

function makeLableEditable(btnItem)
{
   x.addDOMListener(btnItem.firstChild, 'onmousedown', function(){
        btnItem.parentElement.setAttribute('draggable', false);
    });
    x.addDOMListener(btnItem.firstChild, 'onmouseup', function(){
        btnItem.parentElement.setAttribute('draggable', true);
    });         
}

执行上述操作会导致内存泄漏，因为事件处理函数引用了外部作用域 html 对象 (btnItem)。不引用 outerscope 变量会解决问题吗？（我还是怀疑）

请帮我理解一下。

Answer 1

Do the above results in memory leak, as the event handler function referes to the outerscope html object (btnItem).

这不是泄漏，但是是的，它会在内存中保留对 makeLableEditable 调用的 "execution context"，如果 btnItem指的是以后可以被垃圾收集的东西，它会把它保存在内存中。您在那里创建的函数 "closures" 在上下文中，因此它们会保留它。

但这不是泄漏。如果 btnItem 引用的元素被移除，或者它的 firstChild 元素被移除，那么事件处理程序将不再有任何引用它们的东西，因此它们有资格进行 GC——于是，它们所引用的任何东西保留在内存中符合 GC 条件。

在某些情况下，Internet Explorer 存在无法成功清除问题的问题，但我认为这不会引发问题，无论如何我相信 IE9+ 可以正确处理这些情况。

Not reffering to the outerscope variable will solve the problem?

理论上，这些函数是否引用btnItem并不重要，它们将执行上下文保存在内存中。

在实践中，JavaScript 允许引擎进行优化，只要优化除了减少内存消耗等之外没有明显的副作用。因此，现代引擎在 "optimizing" 关闭方面很聪明，不会不必要地保留东西。他们对此并不完美，但只要您的代码不使用 eval 或 new Function（并且您的代码未使用），引擎通常可以优化简单的情况。

执行事件处理函数会导致内存泄漏，这是指引用了一个外部作用域元素

Do event handler function will leads to memory leak, which is referring to an outer scope element

javascript

memory-leaks