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 & Co的《计算机程序的结构和解释》中找到。 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));
}

我很确定迈赫达德的解决方案不起作用。当您看到人们复制到临时变量时，通常是为了保存“this”的值，该值在内部子作用域内可能不同。