JavaScript函数问题

Question

我进行了搜索，但找不到这个看似简单问题的答案，所以......

假设我有一个循环，需要在其中设置回调。我的回调函数看起来像这样：

function callback(var1) { // code }

现在我的循环是这样的：

for( //condition)
{
  var x = something_different_each_time;
  document.getElementById('foo').addEventListener('click', function() { callback(x); }, false);
}

现在看起来即使循环运行 n 次，匿名函数也只编译一次 - 因此每次调用回调时都会使用相同的参数（甚至尽管 x 每次在循环中都会变化）。

我一定在这里遗漏了一些东西..非常感谢任何帮助！ :)

Answer 1

问题是 for 语句块没有创建新的作用域，为此，x 变量属于其封闭作用域，并且所有匿名函数都引用相同的变量...

使用另一个函数创建一个新的词法环境以在每次迭代时保存 x 的值：

for(/*condition*/) {
  var x = something_different_each_time;
  document.getElementById('foo').addEventListener('click', function () {
    return function(y) {
      callback(y);
    };
  }(x), false);
}

Answer 2

请参阅在循环中创建闭包：常见错误

和相关问题:

• 循环内的 JavaScript 闭包 – 简单的实际示例
• JavaScript 不支持带有局部变量的闭包吗？
• 从 Javascript 闭包访问循环中的外部变量
• JavaScript 闭包如何工作？

Answer 3

您应该在调用回调函数之前计算 x！

for( //condition)
{
  //var x = something_different_each_time;
  document.getElementById('foo').addEventListener('click', function() { 
   var x = something_different_each_time;
   callback(x); }, false);
}

Answer 4

是的，x 将引用封闭范围内的同一变量，并且由于该函数稍后执行，因此它将具有 x 的最后一个值。试试这个：

.addEventListener(
    'click',
    (function (i) {
        return function () { callback(i); }
    })(x),
    false
);

这会创建一个闭包，其中锁定了 x 的当前值。