javascript-在循环中使用相同的变量来解决“循环中的闭包”问题

继续进行到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
 }

输出如下：

>我的价值：3
>我的价值：3
>我的价值：3

而预期的输出是：

>我的值：0
>我的价值：1
>我的价值：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
}

我得到了预期的输出,

>我的值：0
>我的价值：1
>我的价值：2

为什么？

解决方法:

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的值.

标签：scope,for-loop,closures,javascript
来源： https://codeday.me/bug/20191111/2022297.html