Javascript 有人能给我解释一下这个匿名函数数组的作用域是如何工作的吗？

很简单，我想知道为什么对arr0的调用似乎会拖入I的值，而不是存储在该位置的函数中的值

<script>
  var arr = [];

  for(var i = 0; i < 3; i++) {
    //Assign anonymous functions to the array in positions 0 to 2
    arr[i] = function() { console.log("function " + i); }
  }

  for(var i = 0; i < 3; i++) {
    //The output for these function calls is correct!
    arr[i]();
  }

  //Here I expected to output: function 0, but instead outputs: function 3 WTF!
  arr[0] ();

</script>

对于最后一次调用，即：arr[0]（）我希望输出为“函数0”，但令人惊讶的是，它不是。。。有人能解释一下原因吗

---

提前谢谢

这是一个常见的问题，在您阅读了评论中发布的副本后，这里有一个可能的解决方案：

var arr = [0,1,2].map(function(i){
  return function(){
    console.log("function " + i);
  };
});

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

arr[0]();

---

这是一个常见问题，在您阅读了评论中发布的副本后，这里有一个可能的解决方案：

var arr = [0,1,2].map(function(i){
  return function(){
    console.log("function " + i);
  };
});

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

arr[0]();

---

这是一个常见问题，在您阅读了评论中发布的副本后，这里有一个可能的解决方案：

var arr = [0,1,2].map(function(i){
  return function(){
    console.log("function " + i);
  };
});

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

arr[0]();

---

这是一个常见问题，在您阅读了评论中发布的副本后，这里有一个可能的解决方案：

var arr = [0,1,2].map(function(i){
  return function(){
    console.log("function " + i);
  };
});

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

arr[0]();

专家会给你一个大致的答案

但我也会特别提到你在这里看到的，因为即使在理解了另一个问题的答案之后，它仍然可能有点让人困惑

这里要了解的主要事情是，只有一个

i

变量。尽管看起来像是用

var

关键字声明了两次，但第二个“声明”基本上被忽略，并被视为任何普通赋值。你看，关键字的

在JavaScript中没有引入新的作用域。所以这两个片段是等价的：

for (var i = 0; i < 3; i++) {}

for（var i=0；i<3；i++）{

以及：

vari；
对于（i=0；i<3；i++）{}

一旦你意识到了这一点，并且你得到了你在第一个循环中创建的函数都在同一个
i
上闭合，那么你就可以凭直觉理解为什么第二个循环看起来是“正确的”：在循环开始时，你将
i
设置为0，然后在每次调用之后，你将它递增。因此，即使它们都接近同一个
i
，您也在更改调用之间的值

当然，对于最后一个调用，
i
的值仍然是
3
，因为这是第二个循环结束时的值，您没有改变它。
将给出一般答案

但我也会特别提到你在这里看到的，因为即使在理解了另一个问题的答案之后，它仍然可能有点让人困惑

这里要了解的主要事情是，只有一个
i
变量。尽管看起来像是用
var
关键字声明了两次，但第二个“声明”基本上被忽略，并被视为任何普通赋值。你看，

关键字的

在JavaScript中没有引入新的作用域。所以这两个片段是等价的：

for (var i = 0; i < 3; i++) {}

for（var i=0；i<3；i++）{

以及：

vari；
对于（i=0；i<3；i++）{}

一旦你意识到了这一点，并且你得到了你在第一个循环中创建的函数都在同一个
i
上闭合，那么你就可以凭直觉理解为什么第二个循环看起来是“正确的”：在循环开始时，你将
i
设置为0，然后在每次调用之后，你将它递增。因此，即使它们都接近同一个
i
，您也在更改调用之间的值

当然，对于最后一个调用，
i
的值仍然是
3
，因为这是第二个循环结束时的值，您没有改变它。
将给出一般答案

但我也会特别提到你在这里看到的，因为即使在理解了另一个问题的答案之后，它仍然可能有点让人困惑

这里要了解的主要事情是，只有一个
i
变量。尽管看起来像是用
var
关键字声明了两次，但第二个“声明”基本上被忽略，并被视为任何普通赋值。你看，

关键字的

在JavaScript中没有引入新的作用域。所以这两个片段是等价的：

for (var i = 0; i < 3; i++) {}

for（var i=0；i<3；i++）{

以及：

vari；
对于（i=0；i<3；i++）{}

一旦你意识到了这一点，并且你得到了你在第一个循环中创建的函数都在同一个
i
上闭合，那么你就可以凭直觉理解为什么第二个循环看起来是“正确的”：在循环开始时，你将
i
设置为0，然后在每次调用之后，你将它递增。因此，即使它们都接近同一个
i
，您也在更改调用之间的值

当然，对于最后一个调用，
i
的值仍然是
3
，因为这是第二个循环结束时的值，您没有改变它。
将给出一般答案

但我也会特别提到你在这里看到的，因为即使在理解了另一个问题的答案之后，它仍然可能有点让人困惑

这里要了解的主要事情是，只有一个
i
变量。尽管看起来像是用
var
关键字声明了两次，但第二个“声明”基本上被忽略，并被视为任何普通赋值。你看，

关键字的

在JavaScript中没有引入新的作用域。所以这两个片段是等价的：

for (var i = 0; i < 3; i++) {}

for（var i=0；i<3；i++）{

以及：

vari；
对于（i=0；i<3；i++）{}

一旦你意识到了这一点，并且你得到了你在第一个循环中创建的函数都在同一个
i
上闭合，那么你就可以凭直觉理解为什么第二个循环看起来是“正确的”：在循环开始时，你将
i
设置为0，然后在每次调用之后，你将它递增。所以即使他们都接近了
function 0
function 1 
function 2    
function 0

var arr = [];

for(var i = 0; i < 3; i++) {
    //Assign anonymous functions to the array in positions 0 to 2
    arr[i] = (function(index){ return function() { console.log("function " + index); };}(i));
}

for(var k = 0; k < 3; k++) {
    //The output for these function calls is correct!
    arr[k]();
}

//Here I expected to output: function 0, but instead outputs: function 3 WTF!
arr[0] ();