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

Question

我正在阅读有关循环引用如何导致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;
    })();
}

因此,内存泄漏问题的解决方案不是引入另一个闭包,而是创建一个新的范围,将值"屏蔽"到彼此(至少在一个方向上).