javascript - 双闭包如何打破循环引用？

Question

我正在阅读如何 circular references cause memory leaks in IE ，但我对使用闭包中的闭包来打破循环引用的示例感到非常困惑:

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

我的脑子里一直在纠结什么引用了什么，哪些是闭包，哪些是作用域对象。有人能比 MDN 更明确地分解它吗？谢谢。

Answer 1

如果你有

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

然后 el引用了 clickHandler ，但是clickHandler还引用了 el ，因为它是一个闭包。 ->循环引用(在 IE 中)

通过引入一个新的作用域，你可以得到 el 本地，因此clickHandler 无法访问它, ->没有循环引用。

function addHandler() {
    var clickHandler = function() {
        this.style.backgroundColor = 'red';
        // cannot access `el` here
    };
    (function() {
        // `el` is local to this immediately invoked function
        var el = document.getElementById('el');
        el.onclick = clickHandler;
    })();
}

因此，内存泄漏问题的解决方案不是引入另一个闭包，而是创建一个新作用域，“屏蔽”每个闭包的值其他(至少在一个方向上)。