“这个”如何在关闭中起作用？

Question

我得到了这个文件说这里有一个关闭：

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

虽然此代码删除了闭包：

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

我看不出第二个如何解决关闭问题。 为什么el.onclick = clickHandler的代码el.onclick = clickHandler创建闭包？ clickHandler的this必须用el来实现。

Answer 1

你的例子不正确。 您链接的文档指出此代码块会创建一个可能泄漏内存的闭包（请注意外部函数中的变量）：

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

您发布的两个示例都不会创建闭包（或只是一个空闭包），但它们使用不同的方法来避免它。

另请注意，此问题似乎只会影响IE的JS引擎。 其他引擎，如V8 / Chrome，似乎只捕获闭包中内部函数中使用的变量，所以我希望在这个代码示例中不会创建循环引用，即使它们应该能够使用循环引用处理垃圾收集。

Answer 2

我看不出第二个如何解决关闭问题。

它没有。 你还有一个关闭。 但是没有使用封闭的变量。

你可以重写它以避免使用这样的闭包：

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

此外，您还可以使用函数声明而不是函数表达式更改clickHandler 。

clickHandler的this必须用el来实现。

不，它没有。 如果你要使用一个闭包，你可以使用el而不是使用this 。

值this是通过一个函数是如何被调用来确定。 原始代码中的闭包没有任何意义。 在元素上触发事件处理程序时， this将是元素。

Answer 3

我认为您没有正确阅读您提到的文档。 问题不在于对'this'的闭包引用，如果你在外部作用域中有变量的话。 因此，如果您使用var el = ...变量，那将在IE中创建一个闭包。 但是在你的第一个snipet你没有使用变量，所以你很高兴。

正如他们在mdn上所说：“这个问题有很多变通方法。最简单的就是不使用el变量。”