Javascript 闭包 - 变量与参数

Question

我正在尝试学习 Javascript 闭包。我很难理解这样一个事实：当您在循环中创建多个闭包时，所有闭包仅保存变量的最后状态。在此示例中，

var links = document.getElementsByTagName('a');

for (var x=0; x<links.length; x++) attachListener();

function attachListener() {
        links[x].addEventListener('click', function(){
            console.log(x);
        }, false);
};

当我的文档中有三个链接时，单击任何链接都会显示“3”，我猜是因为 x 在循环的最终运行后增加到 3。我在这篇优秀介绍中读到，如果您多次运行外部函数，则新的闭包的每次创建。那么为什么每次调用外部函数时每个闭包都不为 x 保存不同的值呢？

当您将 x 作为参数传递给外部函数时，它确实按预期工作。

var links = document.getElementsByTagName('a');

for (x=0; x<links.length; x++) attachListener(x);

function attachListener(z) {
        links[z].addEventListener('click', function(){
            console.log(z);
        }, false);
};

现在，当您单击第一个链接时，您会得到 0，第二个链接时会得到 1，等等。

谁能解释一下为什么会出现这种差异？

干杯

Answer 1

闭包不会捕获变量在创建时的值，而是捕获变量本身。由多个闭包封闭的变量是共享的。这是有意为之的，并且这是在 JavaScript 中进行封装的好方法，例如：

var makeMutablePoint = function(x, y) {
  return {
    position: function() {
      return [x, y];
    },
    add: function(dx, dy) {
      x = x + dx;
      y = y + dy;
    }
  };
};

这也是大多数其他语言中闭包的工作方式（这也是 Python 有时被称为“不”的主要原因）有适当的关闭）。

不过，有一个方面是 JavaScript 特有的，有时可能会让您感到困惑（在本例中实际上似乎已经这样做了）：变量在 JavaScript 中始终具有函数作用域。例如，在您的第一个代码片段中，只有一个 x 变量，而人们可能期望 x 的范围仅限于循环体（使用新的每次迭代的 x）。这是该语言中的一个怪癖，将来可能会通过引入具有更细粒度范围规则的 let 关键字来改进。

Answer 2

我过去对这种同样的行为感到有点恼火。对我来说，这似乎是闭包实现中的一个错误。闭包应该包含“创建闭包时函数的词法环境（例如，可用变量及其值的集合）”的快照（来源：维基百科；重点是我的） 。显然，这并不完全是本例中发生的情况。

但很容易推断出幕后发生的事情。在您的第一个示例中，只有变量 x 的单个实例，当创建闭包时，JavaScript 运行时会在其中存储对 x 的引用，而不是创建闭包时 x 当前值的副本。因此，当循环递增 x 时，闭包中的“副本”似乎也会递增。

在第二种情况下，您将 x 作为参数传递给函数，该函数在将 x 的当前值传递给 attachListener 时将其复制到新变量中() 函数。该副本的值永远不会更新（即它与 x 解耦，并且您不会在attachListener() 内部修改它），因此闭包按预期工作，因为它存储对副本的引用，而不是对原始 x 的引用。

Answer 3

在第一个示例中，x 是附加事件侦听器的外部函数范围的一部分，因此增加到 3。

(outer scope)
    x
attachListener
    (no local variables)

在第二个示例中，z 成为attachListener 的范围，保留在闭包内。

(outer scope)
    x
attachListener
    z

Answer 4

这是一个常见的错误（也称为 Javascript 臭名昭著的循环问题），由对闭包的误解引起。这是一个非常基本的示例：

var funcs = [];
for (var i = 0; i < 5; i++) {
funcs[i] = function() { return i; };
}
> funcs[0]();
5
> funcs[1]();
5

这里要理解的主要内容是闭包关闭（或记住或“抓取”）对非局部（或自由）变量的引用。现在的重点是引用，即闭包不会获取自由变量的值，但会获取对其名称的引用。

如果闭包会记住自由变量的值，那么我们就会有 funcs[0]() 返回 0 等（错误的）预期行为。会记住自由变量的值，那么我们可以说闭包在特定时刻拍摄了这些值的“快照”。

但这不是闭包的作用。

闭包记住对自由变量的引用，而不是它们的值。

在示例中，funcs[i] 记住对 i 的引用代码>.调用时，它会查找全局变量 i 的值，该值当前为 5。

真正帮助我理解这一点的是 本讲座 第 12--15 页，我使用了一些摘录以及定义维基百科。