javascript - 在循环中使用相同的变量来解决 "Closures in the loop"问题

Question

继续 this问题，我尝试了以下代码，在两个循环中使用相同的变量，我得到了想要的结果。我的问题是，为什么？

所以初始代码是:

 var funcs = [];

 for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function() {          // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
 }

 for (var j = 0; j < 3; j++) {
  funcs[j]();                      // this will not give desired output
 }

输出如下:

• 我的值(value):3
• 我的值(value):3
• 我的值(value):3

然而，预期的输出是:

• 我的值(value):0
• 我的值(value):1
• 我的值(value):2

现在，如果我在第二个循环中也使用变量“i”(全局变量)，代码如下所示:

var funcs = [];

for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function() {          // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}

for ( i = 0; i < 3; i++) {
  funcs[i]();                      // this gives desired output
}

我得到了预期的输出，

• 我的值(value):0
• 我的值(value):1
• 我的值(value):2

为什么？

Answer 1

Now, if I use variable 'i' (a global variable) in the second loop as well ... I get the intended output ... WHY?

因为当你执行第一个执行循环时:

for (var j = 0; j < 3; j++) {
  funcs[j]();                      
 }

构造数组的循环已完成，全局变量 i 的值为 3 因此 console.log(i) 结果为对于第一个执行循环的每次迭代，将 3 记录到控制台。当你执行第二个执行循环时:

for ( i = 0; i < 3; i++) {
  funcs[i]();                      
}

你为循环的每次迭代分配一个新值给全局变量 i 并且 console.log(i) 将记录到这个新值控制台:0、1、2。

如何以简单的方式达到预期的结果？

您可以使用 let 以一种简单的方式实现所需的结果:

"use strict"; // use of let requires strict mode

var funcs = [];

 for (let i = 0; i < 3; i++) { // just replace var with let here     
  funcs[i] = function() {          
    console.log("My value: " + i); 
  };
 }

 for (var j = 0; j < 3; j++) {
  funcs[j]();                     
 }

现在数组将由可以访问局部变量的函数构造，该变量在将函数添加到数组时被赋予 i 的值。