Javascript函数问题答案

【问题标题】：Javascript function questionJavascript函数问题
【发布时间】：2011-02-22 05:55:57
【问题描述】：

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

假设我有一个需要设置回调的循环。我的回调函数如下所示：

function callback(var1) { // code }

现在我的循环是这样的：

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

现在看起来即使循环运行 n 次，匿名函数也只编译一次——因此每次调用回调都使用相同的参数调用（即使 x 在循环中每次都不同）。

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

【问题讨论】：

类似问题：stackoverflow.com/questions/1734749 stackoverflow.com/questions/643542 stackoverflow.com/questions/1582634 stackoverflow.com/questions/1331769 stackoverflow.com/questions/1552941 stackoverflow.com/questions/750486 stackoverflow.com/questions/933343 stackoverflow.com/questions/1579978 stackoverflow.com/questions/1413916
这是一个综合列表@CMS。最好用“闭包”和“循环”标记这些问题，这样它们都可以通过简单的搜索链接起来。
完成，所有问题都标记为“javascript”、“closures”和“loops”。这是链接 - stackoverflow.com/questions/tagged/javascript+closures+loops
@Anurag，干得好，非常感谢！
@Anurag，您开始重新标记时，我刚刚访问了 SO 主页，并以为我发现了某种聪明、邪恶的黑客，因为首页突然充满了几乎相同的不同问题海报。然后我注意到你被列为最后一个活跃的海报，并从你个人资料的“活动”选项卡中找到了我的方式。开我的玩笑，但一开始确实很可疑！

标签： javascript loops closures

【解决方案1】：

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

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

【讨论】：

这不是真正的问题。还是谢谢。

【解决方案2】：

见Creating closures in loops: A common mistake

及相关问题：

【讨论】：

【解决方案3】：

问题是for语句的块并没有创建一个新的范围，因为x变量属于它的封闭范围，所有匿名函数都引用同一个变量...

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

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

【讨论】：

我认为您的匿名函数表达式周围缺少一些大括号。
@deceze：不，只有当函数位于可能导致函数表达式和函数声明之间出现语法歧义的地方时才需要括号，在这种情况下，函数位于函数调用的参数列表，显然是在表达式上下文中，没有歧义......例如：(function (fn) { fn();})( function () {alert ('hi');} );
@deceze：也许是一个更好的例子：var foo = function () { return 'bar'; }(); 函数调用没有问题...foo === 'bar';

【解决方案4】：

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

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

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

【讨论】：