首先，了解此代码的错误：

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]();                        // and now let's run each one to see
}

这里，当funcs[]数组初始化时，i递增，funcs数组初始化，func数组的大小变为3，因此i=3，。现在，当调用funcs[j]（）时，它再次使用变量i，变量i已经增加到3。

现在要解决这个问题，我们有很多选择。以下是其中两个：

我们可以用let初始化i，或者用let初始化一个新的变量索引，并使其等于i。因此，当进行调用时，将使用索引，其范围将在初始化后结束。对于调用，索引将再次初始化：var函数=[]；对于（var i=0；i<3；i++）{设索引=i；funcs[i]=函数（）｛console.log（“我的值：”+索引）；};}对于（变量j=0；j<3；j++）{函数[j]（）；}其他选项可以是引入一个返回实际函数的tempFunc：var函数=[]；函数tempFunc（i）{返回函数（）{console.log（“我的值：”+i）；};}对于（var i=0；i<3；i++）{funcs[i]=tempFunc（i）；}对于（变量j=0；j<3；j++）{函数[j]（）；}

使用封闭结构，这将减少额外的for循环。您可以在单个for循环中执行此操作：

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

通过ES6的新功能，可以管理块级范围：

var funcs = [];
for (let 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 (let j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

OP问题中的代码替换为let而不是var。

只需将var关键字更改为let。

var是函数范围的。

let是块范围的。

当您开始编写代码时，for循环将迭代并将i的值赋值为3，在整个代码中该值将保持为3。我建议您阅读更多关于节点中作用域的信息（let、var、const和其他）

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

OP显示的代码的主要问题是，直到第二个循环才读取i。为了演示，想象一下在代码中看到一个错误

funcs[i] = function() {            // and store them in funcs
    throw new Error("test");
    console.log("My value: " + i); // each should log its value.
};

在执行funcs[someIndex]（）之前，错误实际上不会发生。使用相同的逻辑，应该很明显，直到这一点，i的值也不会被收集。一旦原始循环完成，i++将i值设为3，这导致条件i<3失败，循环结束。此时，i为3，因此当使用funcs[someIndex]（）时，每次计算i时，i均为3。

要克服这一点，必须在遇到i时对其求值。注意，这已经以funcs[i]的形式发生（其中有3个唯一索引）。有几种方法可以获取此值。一种是将其作为参数传递给函数，该函数在这里已经以多种方式显示。

另一种选择是构造一个函数对象，它将能够在变量上关闭。这样就可以完成

jsFiddle演示

funcs[i] = new function() {   
    var closedVariable = i;
    return function(){
        console.log("My value: " + closedVariable); 
    };
};

我们将检查，当您声明var并让逐一地。

案例1：使用var

<script>
   var funcs = [];
   for (var i = 0; i < 3; i++) {
     funcs[i] = function () {
        debugger;
        console.log("My value: " + i);
     };
   }
   console.log(funcs);
</script>

现在，按F12打开铬控制台窗口并刷新页面。在数组中每3个函数展开一次。您将看到一个名为[[Scopes]]的属性。展开该属性。你会看到一个名为“Global”的数组对象，展开该对象。您将发现对象中声明的属性“i”具有值3。

结论：

当您在函数外部使用“var”声明变量时，它将变为全局变量（您可以通过键入i或window.i。它将返回3）。除非调用功能。调用函数时，console.log（“My value:”+i）从其Global对象中获取值，并显示后果

CASE2：使用let

现在将“var”替换为“let”

<script>
    var funcs = [];
    for (let i = 0; i < 3; i++) {
        funcs[i] = function () {
           debugger;
           console.log("My value: " + i);
        };
    }
    console.log(funcs);
</script>

做同样的事情，去观察镜。现在您将看到两个对象“块”和“全局”。现在展开Block对象将看到这里定义了“i”，奇怪的是，对于每个函数，如果i不同（0，1，2），则其值是不同的。

结论：

当您在函数外部但在循环内部使用“let”声明变量时，此变量将不是全局变量变量，它将成为块级变量，仅可用于同一函数。这就是为什么，我们调用函数时，每个函数的i值都不同。

有关更紧密的工作原理的更多信息，请浏览精彩的视频教程https://youtu.be/71AtaJpJHw0