这个 JavaScript 闭包是如何工作的？

Question

这是一些 JavaScript：

linkElem.click(function () {
    var data = linkElem.data();
    alert(''+data.mls + ' ' + data.id);
});

它可以工作。

linkElem 是我在函数内的循环中创建的局部变量。我使用 jQuery 的 .data() 为其分配一些数据。如果我没有调用 .click()，linkElem 将在循环期间重新分配，然后在函数返回后回收。但是，我创建了一个引用 linkElem 的匿名函数。所以我不再确定发生了什么事。

我的猜测是，在循环期间创建的所有匿名函数和 linkElem 都被赋予某种 UID，并移至持久/全局范围。这是正确的吗？无偿的细节将不胜感激。

Answer 1

是的，你的描述非常接近。 Javascript 函数调用的本地存储只是为本地变量分配的一块内存。如果您通过在被调用函数内部创建另一个函数来“捕获”这一点，那么存储将被保留，并且局部变量将继续它们的生命，而不会意识到给出的函数他们的诞生可能早已死去。

重要的是要记住，只有函数才会创建这样的存储——诸如大括号封闭的循环体之类的东西不是独立的存储区域。因此，一个常见的错误是在函数中声明变量并在循环中创建的多个函数中重复使用它。这本质上并不是错误的，但效果可能会令人惊讶：

function whatever() {
  for (var i = 0; i < 3; ++i) {
    setTimeout(function() { alert(i); }, 5000);
  }
}

如果你运行它，你会看到三个警报，全部显示“3”。为什么？因为它们都共享相同的“i”变量。您可以通过引入另一个函数层来避免这种情况：

function whatever() {
  for (var i = 0; i < 3; ++i) {
    setTimeout((function(private_i) { return function() { alert(private_i); }; })(i), 5000);
  }
}

“包装器”函数只是提供一个局部变量（参数“private_i”），可以将循环变量“i”复制到其中。

Answer 2

但是，我创建了一个引用 linkElem 的匿名函数。所以我不再确定发生了什么。

它仍然会被重新分配，除非您将它包装在另一个级别的范围中（注意：另一个函数）。

请考虑以下情况：

for (var j = 0;j < 10;j += 1) {
    arrayOfLinks[j].onclick = function () {
        alert(j);
    };
}

在本例中，所有这些链接在单击时都会发出警报 10，因为 j 超出了范围并且正在更新。

如果您以相同的方式创建 linkElem，您可能只会获得循环中last linkElem 的结果。

这是一个更好的方法：

linkElem.click(function () {
    var data = $(this).data(); // no longer dependent on `linkElem` reference
    alert(''+data.mls + ' ' + data.id);
});

Answer 3

请参阅此 JavaScript 闭包如何工作？
这可能有助于您理解闭包。

每当您在另一个函数中看到 function 关键字时，内部函数就可以访问外部函数中的变量。

function foo(x) {
  var tmp = 3;
  function bar(y) {
    alert(x + y + (++tmp));
  }
  bar(10);
}
foo(2)

这将始终提醒 16，因为 bar 可以访问被定义为 foo 参数的 x，并且它还可以访问 来自 foo 的 tmp。

那是一个闭包。函数不必返回才能被称为闭包。 简单地访问直接词法范围之外的变量就会创建一个闭包。

function foo(x) {
  var tmp = 3;
  return function (y) {
    alert(x + y + (++tmp));
  }
}
var bar = foo(2); // bar is now a closure.
bar(10);

上面的函数也会警告 16，因为 bar 仍然可以引用 x 和 tmp，即使它不再直接位于作用域内。

然而，由于 tmp 仍然挂在 bar 的闭包内，因此它也在递增。每次调用 bar 时它都会递增。

闭包最简单的例子是这样的：

var a = 10;
function test() {
  console.log(a); // will output 10
  console.log(b); // will output 6
}
var b = 6;
test();

当调用 Javascript 函数时，会创建一个新的执行上下文。与函数参数和父对象一起，此执行上下文还接收在其外部声明的所有变量（在上面的示例中，包括“a”和“b”）。

可以通过返回闭包函数列表或将它们设置为全局变量来创建多个闭包函数。所有这些都将引用相同 x 和相同tmp，它们不会制作自己的副本。

[你]：很有趣，告诉我更多！

这里的数字x是一个字面数字。与 JavaScript 中的其他文字一样，当调用 foo 时，数字 x 会作为其参数复制到 foo 中x。

另一方面，JavaScript 在处理对象时总是使用引用。如果你用一个对象调用foo，它返回的闭包将引用那个原始对象！

function foo(x) {
  var tmp = 3;
  return function (y) {
    alert(x + y + tmp);
    x.memb = x.memb ? x.memb + 1 : 1;
    alert(x.memb);
  }
}
var age = new Number(2);
var bar = foo(age); // bar is now a closure referencing age.
bar(10);

正如预期的那样，每次调用 bar(10) 都会增加 x.memb。可能出乎意料的是，x 只是引用与 age 变量相同的对象！多次调用 bar 后，age.memb 将变为 2！此引用是 HTML 对象内存泄漏的基础。