事件处理程序的闭包 - 必须“返回”答案

【问题标题】：Closures for Event Handlers - is "return" a must事件处理程序的闭包 - 必须“返回”
【发布时间】：2011-02-17 15:02:58
【问题描述】：

我可以通过下面提到的两种方式在 javascript 中实现事件处理程序，我想知道这两种样式之间是否有任何区别，或者在这两种情况下 click_handler 是一个闭包并且没有区别。我很困惑，因为我在某处读到只有在“return”与匿名函数一起使用时才形成闭包

function foo() {
    var a = 5;

    function click_handler() {
        a++;
    }
    someElement.addEventHandler('click', click_handler, false);
}

或

function foo() {
    var a = 5;

    return function() {
        a++;
    }
}

click_handler = foo()
someElement.addEventListener('click', click_handler, false);

【问题讨论】：

标签： javascript closures

【解决方案1】：

在创建 2 个函数时形成闭包。在“闭包形成”方面，它们在功能上应该是一样的。您不需要返回即可形成闭包。

不过……

在#1 中，当您调用 foo() 时，您将向 onClick 添加一个事件侦听器。如果你一次又一次地调用它，它会一直附加到 onClick 事件...

在#2 中，当您调用 foo() 时，您只是在“重新关闭”该函数。如果你一遍又一遍地调用它，它不会重新附加到 onClick 事件...

并且，在 #1 中，如果 someElement 的引用已经更新，那么当再次调用 foo() 时，它将使用新的 someElement 的引用...

假设你只想附加一次onClick函数，以后不用重新附加，我就这样写代码……

(function() {
  var a = 0;
  someElement.addEventListener("click", function() {
    a++;
  }, false);
})();

这个自执行函数将消除在全局中添加“foo”的需要，因为您只使用它一次。

【讨论】：

【解决方案2】：

只是为了明确消除您的困惑：

闭包和return语句彼此无关，它们不会以任何方式影响彼此的行为。

闭包不是像数字、字符串或函数这样的对象。例如，您永远不能将闭包分配给变量。而且你不能返回闭包。您在第二个示例中返回的是（严格来说）一个函数（不是闭包），它在变量 a 上“关闭”（因此创建了一个闭包）。闭包是与你的函数一起存在的东西，但你从不直接对它们进行操作。您可以使用包含它们的函数，也可以更改它们的状态（通过它们关闭的变量），但闭包本身是一个更抽象的东西。

编辑：我确实意识到，闭包和函数这两个术语经常相互替代使用。很容易混淆，因为在 JavaScript 中两者之间存在 1-1 的关系。这当然只会增加混乱:)

【讨论】：