var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
// and store them in funcs
funcs[i] = function() {
// each should log its value.
console.log("My value: " + i);
};
}
for (var j = 0; j < 3; j++) {
// and now let's run each one to see
funcs[j]();
}
它输出这个:
我的价值:3
我的价值:3
我的价值:3
而我希望它输出:
我的价值:0
我的价值:1
我的价值:2
当函数运行延迟是由使用事件监听器引起时,也会出现同样的问题:
var buttons = document.getElementsByTagName("button");
// let's create 3 functions
for (var i = 0; i < buttons.length; i++) {
// as event listeners
buttons[i].addEventListener("click", function() {
// each should log its value.
console.log("My value: " + i);
});
}
<button>0</button>
<br />
<button>1</button>
<br />
<button>2</button>
… 或异步代码,例如使用 Promises:
// Some async wait function
const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));
for (var i = 0; i < 3; i++) {
// Log `i` as soon as each promise resolves.
wait(i * 100).then(() => console.log(i));
}
在 for in
和 for of
循环中也很明显:
const arr = [1,2,3];
const fns = [];
for(var i in arr){
fns.push(() => console.log(`index: ${i}`));
}
for(var v of arr){
fns.push(() => console.log(`value: ${v}`));
}
for(var f of fns){
f();
}
这个基本问题的解决方案是什么?
原文由 nickf 发布,翻译遵循 CC BY-SA 4.0 许可协议
好吧,问题在于每个匿名函数中的变量
i
都绑定到函数外部的同一个变量。ES6 解决方案:
let
ECMAScript 6 (ES6) 引入了新的
let
和const
关键字,它们的作用域不同于基于var
的变量。例如,在具有let
索引的循环中,循环中的每次迭代都会有一个新变量i
具有循环范围,因此您的代码将按预期工作。有很多资源,但我推荐 2ality 的块范围帖子 作为重要的信息来源。但请注意,IE9-IE11 和 Edge 14 之前的 Edge 支持
let
上述错误(它们不会每次都创建一个新的i
,所以上面的所有函数都会像我们使用var
一样记录 3)。 Edge 14 终于做对了。ES5.1 解决方案:forEach
随着
Array.prototype.forEach
函数(在 2015 年)相对广泛的可用性,值得注意的是,在那些主要涉及对一组值进行迭代的情况下,.forEach()
提供了一种干净、自然的方法来获得一个独特的闭包每次迭代。也就是说,假设您有某种包含值(DOM 引用、对象等)的数组,并且出现设置特定于每个元素的回调的问题,您可以这样做:这个想法是,与
.forEach
循环一起使用的回调函数的每次调用都将是它自己的闭包。传递给该处理程序的参数是特定于迭代的特定步骤的数组元素。如果在异步回调中使用它,它不会与在迭代的其他步骤中建立的任何其他回调发生冲突。如果您碰巧使用 jQuery,
$.each()
函数可以为您提供类似的功能。经典解决方案:闭包
您要做的是将每个函数内的变量绑定到函数外的一个单独的、不变的值:
由于 JavaScript 中没有块作用域——只有函数作用域——通过将函数创建包装在一个新函数中,您可以确保“i”的值保持您的预期。