循环内的 JavaScript 闭包——简单实用的示例

笠威

• var funcs = ；// let's create 3 functionsfor (var i = 0; i 输出此:
  6 e3 D; g, b) d6 L) e
• My value: 3
  
• My value: 3
  / P4 ~: E* a" n# w8 O
• My value: 3
  
• 而且我希望它输出:
  
• My value: 0
  6 V. y- o6 n( v( s' [- B0 l6 S9 D
• My value: 1
  
• My value: 2
  9 I* }; @& i; @+ n) U$ O
• 当函数运行延迟是由使用事件监听器引起时，也会出现同样的问题：
  
• [code]var buttons = document.getElementsByTagName("button");// let's create 3 functionsfor (var i = 0; i … 或异步代码，如使用 Promises：[code]// Some async wait functionconst wait = (ms) => new Promise((resolve,reject) => setTimeout(resolve,ms));for (var i = 0; i  console.log(i));}
  

在for in和for of循环也很明显：
[code]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()code]这个基本问题的解决方案是什么？
3 k+ W/ d- ?) B                                                               
; s( N# W$ e# U) G1 W6 P    解决方案:                                                               
# z$ m& [5 P$ Z' [% I' Y8 Z. J/ N                                                                问题是i每个匿名函数中的变量都与函数外的相同变量绑定。
7 I6 Z4 @  v/ X/ i( [ES解决方案： letECMAScript 6 (ES6) 引入新的let和const关键字，它们的作用域和var基于 - 的变量不同。例如，在有let-based 在索引循环中，每次迭代都会有一个具有循环范围的新变量i，因此，您的代码将按预期工作。有很多资源，但我建议2ality 块范围帖作为良好的信息来源。
[code]for (let i = 0; i 但请注意，IE9-IE11 和 Edge 14 前的 Edge 支持let但是会出现上述错误(他们不会i每次都会创建新函数，所以上述所有函数都会像我们用 3 一样记录 3 var）。Edge 14 终于做对了。
ES5.1 解决方案：forEach随着Array.prototype.forEach函数相对广泛的可用性(2015年 )，值得注意的是，在主要涉及迭代一组值的情况下，.forEach()它为每次迭代提供了一种干净自然的方式来获得不同的封闭包。也就是说，假设你有一定的包含值（DOM 引用、对象等）的数组，并且出现了为每个元素设置特定回调的问题，您可以这样做：
[code]var someArray = [ /* whatever */ ...someArray.forEach(function(arrayElement) {  / ... code code code for this one element  someAsynchronousFunction(arrayElement,function()      arrayElement.doSomething()； )；code]这个想法是每次调用回调函数与循环一起使用的回调函数.forEach将是它自己的封闭包。传递给处理程序的参数是特定于迭代特定步骤的数组元素。如果在异步回调中使用，则不会与迭代其他步骤中建立的任何其他回调发生冲突。
7 f' x$ K1 w5 X1 i) H) n若碰巧在 jQuery 工作，这个$.each()函数会给你类似的能力。
: I  z" S% V0 k# U0 }经典解决方案：闭包您要做的是将每个函数中的变量绑定到函数外的一个单独的、不变的值：
[code]var funcs = [];function createfunc(i) {  return function()      console.log("My value: "   i);  };}for (var i = 0; i 由于 JavaScript 中没有块作用域-只有函数作用域-通过在新函数中创建和包装函数，您可以确保 “i” 保持你的期望。