JavaScript闭包内循环简单实例

var funcs = []; for (var i = 0; i < 3; i++) { funcs[i] = function() { console.log(i); }; } for (var j = 0; j < 3; j++) { funcs[j](); }

如上，输出的结果是３个“３”，但是想输出的是“０　１　２”。
当使用时间监听器导致函数运行延迟时，也出现同样的问题：

var buttons = document.getElementsByTagName("button"); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", function() { console.log(i); }); }

或异步代码：

const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms)); for(var i = 0; i < 3; i++){ wait(i * 100).then(() => console.log(i)); }

这个问题的解决办法是什么？
问题在于变量ｉ，在每个匿名函数中，都被绑定到函数外的同一个变量上。
【JavaScript闭包内循环简单实例】经典解决方案：闭包
你要做的就是将每个函数中的变量绑定到函数外部一个单独的，不变的值：

var funcs = [];
function createfunc(i) {
return function() { console.log(i); };
}
for (var i = 0; i < 3; i++) {
funcs[i] = createfunc(i);
}
for (var j = 0; j < 3; j++) {
funcs[j]();
}

由于JavaScript中没有块作用域，只有函数作用域，通过将函数创建在一个新函数中，你可以确保i的值保持为你想要的值。
JS2015解决方案：forEach
随着相对广泛的可用性数组，原型，值得注意的是，在那些设计值数组迭代的情况下，forEach提供了一种干净、自然的方法来每个迭代获得不同的闭包。也就说，假设你有某种包含值的数组（DOM引用，对象等），并且出现了针对每个元素设置回调的问题，你可以这样做：

var arrays = [ /*values*/ ]; arrays.forEach(function(arrayElement) { someAsynchronousFunction(arrayElement, function() { arrayElement.doSomething(); }); });

其思想是，forEach循环使用的回调函数的每次调用都是它自己的闭包，传入该处理程序的参数是特定于迭代的特定步骤的数组元素。如果在异步回调中使用它，它将不会与在迭代的其他步骤中建立的任何其他回调发生冲突。如果你碰巧使用jQuery， $.each()函数提供了类似的功能。
ES6解决方案：let
ECMAScript 6 (ES6)引入了新的let和const关键字，它们的作用域不同于基于var的变量。例如，在一个基于let的索引的循环中，循环中的每个迭代都有一个新值i，其中每个值都在循环的作用域内，因此你的代码将如你所期望的那样工作。