闭包：“Javascript：好部分”的逐行解释例子？

Question

我正在阅读“Javascript：好的部分”，并且对这里到底发生的事情感到完全困惑。更详细和/或简化的解释将不胜感激。

// BAD EXAMPLE

// Make a function that assigns event handler functions to an array  of nodes the wrong way.
// When you click on a node, an alert box is supposed to display the ordinal of the node.
// But it always displays the number of nodes instead.

var add_the_handlers = function (nodes) {
    var i;
    for (i = 0; i < nodes.length; i += 1) {
        nodes[i].onclick = function (e) {
            alert(i);
        }
    }
};

// END BAD EXAMPLE

add_the_handlers 函数旨在为每个处理程序提供一个唯一的编号 (i)。它失败了，因为处理函数绑定到变量 i，而不是创建函数时变量 i 的值：

// BETTER EXAMPLE

// Make a function that assigns event handler functions to an array of nodes the right way.
// When you click on a node, an alert box will display the ordinal of the node.

var add_the_handlers = function (nodes) {
    var i;
    for (i = 0; i < nodes.length; i += 1) {
        nodes[i].onclick = function (i) {
            return function (e) {
                alert(i);
            };
        }(i);
    }
};

现在，而不是将函数分配给onclick 时，我们定义一个函数并立即调用它，传入 i。该函数将返回一个事件处理函数，该函数绑定到传入的 i 值，而不是绑定到 add_the_handlers 中定义的 i。返回的函数被分配给 onclick。

Answer 1

我认为对于 JavaScript 新手来说，这是一个非常常见的困惑源。首先，我建议查看以下 Mozilla Dev 文章，了解有关闭包和词法作用域主题的简要介绍：

• Mozilla 开发中心：使用闭包

让我们从坏的开始：

var add_the_handlers = function (nodes) {
// Variable i is declared in the local scope of the add_the_handlers() 
// function. 
   var i;

// Nothing special here. A normal for loop.
   for (i = 0; i < nodes.length; i += 1) {

// Now we are going to assign an anonymous function to the onclick property.
       nodes[i].onclick = function (e) {

// The problem here is that this anonymous function has become a closure. It 
// will be sharing the same local variable environment as the add_the_handlers()
// function. Therefore when the callback is called, the i variable will contain 
// the last value it had when add_the_handlers() last returned. 
           alert(i);
       }
   }

// The for loop ends, and i === nodes.length. The add_the_handlers() maintains
// the value of i even after it returns. This is why when the callback
// function is invoked, it will always alert the value of nodes.length.
};

我们可以通过更多的闭包来解决这个问题，正如 Crockford 在“好例子”中建议的那样。闭包是一种特殊的对象，它结合了两个东西：函数和创建该函数的环境。在 JavaScript 中，闭包的环境由创建闭包时范围内的任何局部变量组成：

 // Now we are creating an anonymous closure that creates its own local 
 // environment. I renamed the parameter variable x to make it more clear.
 nodes[i].onclick = function (x) {

     // Variable x will be initialized when this function is called.

     // Return the event callback function.
     return function (e) {
         // We use the local variable from the closure environment, and not the 
         // one held in the scope of the outer function add_the_handlers().
         alert(x);
     };
 }(i); // We invoke the function immediately to initialize its internal 
       // environment that will be captured in the closure, and to receive
       // the callback function which we need to assign to the onclick.

闭包函数不是让所有回调共享一个环境，而是为每个回调创建一个新环境。我们还可以使用函数工厂来创建闭包，如下例所示：

function makeOnClickCallback (x) {
   return function (e) {
      alert(x);
   };
}

for (i = 0; i < nodes.length; i += 1) {
   nodes[i].onclick = makeOnClickCallback(i);
}

Answer 2

这都是关于关闭的。在第一个示例中，对于每个单击事件处理程序，“i”将等于“nodes.length”，因为它使用创建事件处理程序的循环中的“i”。当事件处理程序被调用时，循环将结束，因此“i”将等于“nodes.length”。

在第二个示例中，“i”是一个参数（因此是一个局部变量）。事件处理程序将使用局部变量“i”（参数）的值。

Answer 3

在这两个示例中，传递的任何节点都绑定了一个 onclick 事件处理程序（就像 一样，这是不好的做法毕竟）。

不同之处在于，在坏示例中，每个闭包（即事件处理函数）都引用完全相同的 i 变量，因为它们具有共同的父作用域。

这个很好的例子使用了一个立即执行的匿名函数。此匿名函数引用与坏示例中完全相同的 i 变量，但因为它是执行并提供 i 作为其第一个参数 i的值被分配给一个名为...的局部变量，嗯？ ... i，完全正确 - 从而覆盖父级范围中定义的内容。

让我们重写这个很好的例子，让它变得更清楚：

var add_the_handlers = function (nodes) {
    var i;
    for (i = 0; i < nodes.length; i += 1) {
        nodes[i].onclick = function (newvar) {
            return function (e) {
                alert(nevar);
            };
        }(i);
    }
};

这里我们用 newvar 替换了返回的事件处理函数中的 i 并且它仍然有效，因为 newvar > 正是您所期望的 - 从匿名函数的作用域继承的新变量。

祝你好运。

Answer 4

这与封闭有关。

当你做坏例子中的事情时，

当你点击每个节点时，你将得到最新的 i 值（即你有 3 个节点，无论你点击哪个节点你都会得到 2）。因为您的警报（i）绑定到变量 i 的引用，而不是绑定到事件处理程序中时 i 的值。

以更好的示例方式进行操作，您将其绑定到迭代时的 i 作为，因此单击节点 1 将为您提供 0，节点 2 将为您提供 1，节点 3 将为您提供 2。

基本上，您当在 }(i) 行调用 i 时，立即评估 i 的值，并将其传递给参数 e，该参数现在保存当时 i 的值。

顺便说一句...我认为更好的示例部分中有一个拼写错误...它应该是alert(e)而不是alert(i)。