for循环中的闭包

Question

循环中的闭包给我带来了问题。我想我必须创建另一个函数来返回一个函数来解决问题，但我无法让它与我的 jQuery 代码一起使用。

这是一个简化形式的基本问题：

function foo(val) {
  alert(val);
}

for (var i = 0; i < 3; i++) {
  $('#button'+i).click(function(){
    foo(i);
  });
}

点击三个按钮中的任何一个都会发出警报，说 3。我想要的功能是点击按钮 1 会发出警报，说 1，按钮 2 会说 2，依此类推。

我怎样才能做到这一点？

Answer 1

参见bind 方法。

$('#button'+i).bind('click', {button: i}, function(event) {
  foo(event.data.button);
});

来自文档：

可选的 eventData 参数是 不常用。提供时，此 参数允许我们传递额外的 信息给处理者。一个方便的 使用这个参数是工作 围绕关闭引起的问题

Answer 2

试试这个代码：

function foo(val) {
  alert(val);
}

var funMaker = function(k) {
  return function() {
    foo(k);
  };
};

for (var i = 0; i < 3; i++) {
  $('#button'+i).click(funMaker(i));
}

这里有一些要点：

• JavaScript 是函数范围的。如果您想要一个新的（“更深”）范围，则需要创建一个函数来保存它。
• 此解决方案是特定于 Javascript 的，它可以使用或不使用 jQuery。
• 该解决方案有效，因为i 的每个值都被复制到一个新范围内作为k，并且从funMaker 返回的函数在k 附近关闭（在循环中不会改变），而不是在附近i（确实如此）。
• 您的代码不起作用，因为您传递给click 的函数没有“拥有”i，它关闭了其创建者的i，并且i 在循环中发生了变化.
• 本示例可以使用 funMaker 内联编写，但我通常使用此类辅助函数来使事情更清晰。
• funMaker 的参数是k，但这没什么区别，它本来可以是i 没有任何问题，因为它存在于函数funMaker 的范围内。
• 在 Sussman & Abelson 的“计算机程序的结构和解释”中可以找到对“环境”评估模型最清晰的解释（http://mitpress.mit.edu/sicp/ 全文在线提供，不易阅读） - 请参阅第 3.2 节。由于 JavaScript 确实是具有 C 语法的 Scheme，因此这种解释是可以的。

编辑：修正了一些标点符号。

Answer 3

@Andy 解决方案是最好的。但是您也可以使用 Javascript 范围来帮助您保存闭包中的值。

您可以通过执行匿名函数在循环体中创建一个新范围来做到这一点。

for (var i = 0; i < 3; i++) {
  (function(){
    var index = i; 
    $('#button'+index).click(function(){
      foo(index);
    });
  })();
}

由于循环体在每次迭代中都是一个新的作用域，因此索引变量在每次迭代中都会以正确的值复制。

Answer 4

使用 jquery 中的 .each 函数——我猜你是在循环遍历类似的元素——所以使用类似的东西添加点击：

$(element).children(class).each(function(i){
   $(this).click(function(){
      foo(i);
   });
});

未经测试，但我总是尽可能使用这种结构。

Answer 5

或者只是制造一个新功能，就像你描述的那样。它看起来像这样：

function foo(val) {
    return function() {
        alert(val);
    }
}

for (var i = 0; i < 3; i++) {
    $('#button'+i).click(foo(i));
}

我很确定 Mehrdad 的解决方案行不通。当您看到人们复制到临时变量时，通常是保存“this”的值，该值在内部子范围内可能会有所不同。