请解释在循环中使用javascript闭包

Please explain the use of JavaScript closures in loops

本问题已经有最佳答案，请猛点这里访问。

我已经阅读了很多关于循环中闭包和闭包的解释。我很难理解这个概念。我有这段代码：有没有一种方法可以尽可能地减少代码，以便使闭包的概念更加清晰。我很难理解i在两个圆括号内的部分。谢谢

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

警告：长(ish)答案

这是直接从我在内部公司wiki上写的一篇文章中复制的：

问题：如何在循环中正确使用闭包？快速回答：使用功能工厂。

1
2
3
4
5
6
7

for (var i=0; i<10; i++) {
document.getElementById(i).onclick = (function(x){
return function(){
alert(x);
}
})(i);
}

或者更容易阅读的版本：

1
2
3
4
5
6
7
8
9

function generateMyHandler (x) {
return function(){
alert(x);
}
}

for (var i=0; i<10; i++) {
document.getElementById(i).onclick = generateMyHandler(i);
}

这常常会让那些不熟悉JavaScript或函数式编程的人感到困惑。这是由于误解了闭包是什么。

闭包不仅仅传递变量的值，甚至传递对变量的引用。一个闭包捕获变量本身！下面的代码说明了这一点：

1
2
3

var message = 'Hello!';
document.getElementById('foo').onclick = function(){alert(message)};
message = 'Goodbye!';

单击元素"foo"将生成一个带有消息"再见"的警告框。。因此，在循环中使用简单的闭包将导致所有闭包共享同一个变量，并且该变量将包含循环中分配给它的最后一个值。例如：

1
2
3

for (var i=0; i<10; i++) {
document.getElementById('something'+i).onclick = function(){alert(i)};
}

单击时，所有元素都将生成一个数字为10的警报框。实际上，如果现在执行i="hello";，所有元素现在都将生成"hello"警报！变量i在十个函数加上当前函数/作用域/上下文之间共享。把它看作一种只有相关函数才能看到的私有全局变量。

我们需要的是该变量的一个实例，或者至少是对变量的一个简单引用，而不是变量本身。幸运的是，javascript已经有了一种传递引用(对象)或值(字符串和数字)的机制：函数参数！

在javascript中调用函数时，如果函数是对象，则通过引用传递该函数的参数；如果函数是字符串或数字，则通过值传递。这足以打破闭包中的变量共享。

所以：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

for (var i=0; i<10; i++) {
document.getElementById(i).onclick =
(function(x){ /* we use this function expression simply as a factory
to return the function we really want to use: */

/* we want to return a function reference
so we write a function expression*/
return function(){
alert(x); /* x here refers to the argument of the factory function
captured by the 'inner' closure */
}

/* The brace operators (..) evaluates an expression, in this case this
function expression which yields a function reference. */

})(i) /* The function reference generated is then immediately called()
where the variable i is passed */
}