聚会的时间有点晚了，但我今天正在探讨这个问题，并注意到许多答案并没有完全解决Javascript如何处理作用域的问题，这本质上就是问题的根源。

所以正如许多其他人提到的，问题是内部函数引用的是同一个i变量。那么为什么我们不在每次迭代时都创建一个新的局部变量，并让内部函数引用它呢？

//覆盖console.log（），以便可以看到控制台输出console.log=函数（消息）｛document.body.innerHTML+='<p>'+msg+'</p>'；｝；var funcs=｛｝；对于（变量i=0；i<3；i++）{var ilocal=i//创建新的局部变量funcs[i]=函数（）{console.log（“我的值：”+ilocal）//每个都应该引用自己的局部变量};}对于（变量j=0；j<3；j++）{函数[j]（）；}

就像之前一样，每个内部函数输出分配给i的最后一个值，现在每个内部函数只输出分配给ilocal的最后一值。但每个迭代不应该有自己的ilocal吗？

事实证明，这就是问题所在。每个迭代都共享相同的范围，因此第一次迭代之后的每个迭代都只是覆盖ilocal。来自MDN：

重要提示：JavaScript没有块范围。随块引入的变量的作用域是包含函数或脚本，设置这些变量的效果将持续到块本身之外。换句话说，块语句不引入范围。尽管“独立”块是有效的语法，但您不希望在JavaScript中使用独立块，因为如果您认为它们在C或Java中做类似的事情，它们不会做您认为它们做的事情。

再次强调：

JavaScript没有块范围。随块引入的变量的作用域是包含函数或脚本

通过在每次迭代中声明ilocal之前检查ilocal，我们可以看到这一点：

//覆盖console.log（），以便可以看到控制台输出console.log=函数（消息）｛document.body.innerHTML+='<p>'+msg+'</p>'；｝；var funcs=｛｝；对于（变量i=0；i<3；i++）{console.log（ilocal）；var ilocal=i；}

这正是这个bug如此棘手的原因。即使您正在重新定义变量，Javascript也不会抛出错误，JSLint甚至不会抛出警告。这也是为什么解决这一问题的最佳方法是利用闭包，这本质上就是在Javascript中，内部函数可以访问外部变量，因为内部作用域“包围”外部作用域。

这也意味着内部函数“抓住”外部变量并保持它们的活力，即使外部函数返回。为了利用这一点，我们创建并调用一个包装函数来创建一个新的作用域，在新作用域中声明ilocal，并返回一个使用ilocal的内部函数（下面有更多解释）：

//覆盖console.log（），以便可以看到控制台输出console.log=函数（消息）｛document.body.innerHTML+='<p>'+msg+'</p>'；｝；var funcs=｛｝；对于（变量i=0；i<3；i++）{funcs[i]=（function（）｛//使用包装函数创建新范围var ilocal=i//将i捕获到本地var中return function（）｛//返回内部函数console.log（“我的值：”+ilocal）；};})(); //记住运行包装器函数}对于（变量j=0；j<3；j++）{函数[j]（）；}

在包装器函数内创建内部函数为内部函数提供了一个只有它才能访问的私有环境，即“闭包”。因此，每次调用包装器函数时，我们都会创建一个新的内部函数，并使用它自己的独立环境，确保ilocal变量不会相互冲突和覆盖。一些小的优化给出了许多其他SO用户给出的最终答案：

//覆盖console.log（），以便可以看到控制台输出console.log=函数（消息）｛document.body.innerHTML+='<p>'+msg+'</p>'；｝；var funcs=｛｝；对于（变量i=0；i<3；i++）{funcs[i]=包装器（i）；}对于（变量j=0；j<3；j++）{函数[j]（）；}//为内部函数创建单独的环境函数包装器（ilocal）{return function（）｛//返回内部函数console.log（“我的值：”+ilocal）；};}

使现代化

随着ES6成为主流，我们现在可以使用新的let关键字来创建块范围的变量：

//覆盖console.log（），以便可以看到控制台输出console.log=函数（消息）｛document.body.innerHTML+='<p>'+msg+'</p>'；｝；var funcs=｛｝；for（设i=0；i<3；i++）{//使用“let”声明“i”funcs[i]=函数（）{console.log（“我的值：”+i）//每个都应该引用自己的局部变量};}对于（var j=0；j<3；j++）{//我们可以在这里使用“var”函数[j]（）；}

看看现在有多容易！有关更多信息，请参阅此答案，我的信息基于此。

这个问题已经有很多有效答案了。但使用功能方法的并不多。这里有一个使用forEach方法的替代解决方案，它可以很好地处理回调和闭包：

设arr=[1,2,3]；

让myFunc=（val，index）=>{console.log（'val:'+val+'\nindex:'+index）；};

arr.forEach（myFunc）；

这描述了在JavaScript中使用闭包的常见错误。

函数定义新环境

考虑：

function makeCounter()
{
  var obj = {counter: 0};
  return {
    inc: function(){obj.counter ++;},
    get: function(){return obj.counter;}
  };
}

counter1 = makeCounter();
counter2 = makeCounter();

counter1.inc();

alert(counter1.get()); // returns 1
alert(counter2.get()); // returns 0

每次调用makeCounter时，｛counter:0｝都会创建一个新对象。另外，obj的新副本也被创建以引用新对象。因此，计数器1和计数器2彼此独立。

回路中的闭合

在循环中使用闭包很棘手。

考虑：

var counters = [];

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = {
      inc: function(){obj.counter++;},
      get: function(){return obj.counter;}
    }; 
  }
}

makeCounters(2);

counters[0].inc();

alert(counters[0].get()); // returns 1
alert(counters[1].get()); // returns 1

请注意，计数器[0]和计数器[1]不是独立的。事实上，它们对同一个对象进行操作！

这是因为在循环的所有迭代中只有一个obj副本共享，可能是出于性能原因。即使｛counter:0｝在每次迭代中都创建了一个新对象，obj的同一副本也只会用对最新对象的引用。

解决方案是使用另一个助手函数：

function makeHelper(obj)
{
  return {
    inc: function(){obj.counter++;},
    get: function(){return obj.counter;}
  }; 
}

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = makeHelper(obj);
  }
}

这是因为直接分配了函数范围中的局部变量以及函数参数变量新副本。

您需要了解的是javascript中变量的范围是基于函数的。这与c#有一个重要的区别，因为c#有块作用域，只需将变量复制到for中的一个即可。

将其包装在一个函数中，该函数会像apphacker的答案那样计算返回函数的值，这会起到作用，因为变量现在具有函数作用域。

还有一个let关键字而不是var，这将允许使用块范围规则。在这种情况下，在for中定义一个变量就可以了。也就是说，由于兼容性，let关键字不是一个实用的解决方案。

var funcs=｛｝；对于（变量i=0；i<3；i++）{设索引=i//添加此funcs[i]=函数（）{console.log（“我的值：”+索引）//更改副本};}对于（变量j=0；j<3；j++）{函数[j]（）；}

最初的示例不起作用的原因是，您在循环中创建的所有闭包都引用了同一帧。实际上，一个对象上有3个方法，只有一个i变量。他们都打印出相同的值。

您可以为数据列表（如查询js（*））使用声明性模块。在这些情况下，我个人认为声明性方法不太令人惊讶

var funcs = Query.range(0,3).each(function(i){
     return  function() {
        console.log("My value: " + i);
    };
});

然后，您可以使用第二个循环并获得预期的结果，也可以这样做

funcs.iterate(function(f){ f(); });

（*）我是query js的作者，因此倾向于使用它，所以不要将我的话作为仅针对声明性方法的所述库的建议：）