函数调用中的循环计数器可视性

Question

我在javascript项目中遇到了一个有趣的困境，在所述for循环中调用的函数中可以看到我的for循环中的计数器。这里有一个例子：

function callback(){
  console.log("My value is " + i);
}
function setup(){
  for(i=0; i<3; i++){
    callback();
  }
}
setup();

该程序的输出为：

My value is 0
My value is 1
My value is 2

在for循环中使用变量i的情况下，这是一个问题，该循环调用在自己的for循环中使用i的函数。我知道我可以在回调函数中使用不同的变量，但我不相信这在所有情况下都是实用的。

我在Firefox 42.0 中运行此代码

谢谢。

Answer 1

您的i是全局变量。您已经在这两个函数之外声明了它，并且可以在这两个中访问它。

始终使用本地变量作为循环计数器：

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

Answer 2

这是由于没有定义变量，导致在全局范围内自动定义/使用。这是无效的，并且将在严格模式下引发异常，应该将其视为一个错误，并始终避免。

这种行为不限于for或任何其他用途。

正确的用法是始终在相关范围内定义变量：

'use strict'
function callback(){
  var i;
  console.log("My value is " + i); // i is undefined
}
function setup(){
  var i;
  for(i=0; i<3; i++){
    callback();
  }
}
setup();

Answer 3

这是程序员对变量范围的典型误解。

在您的情况下，由于变量没有声明，javascript engine将其添加到全局范围，因此它也可以在for循环之外访问。

可以通过在for循环中声明一个局部作用域变量来解决这个问题，这样它的可见性就不会暴露在for循环作用域之外。

JS代码：

function callback(){
 console.log("My value is " + i);
}
function setup(){
  for(i=0; i<3; i++){
    callback();
  }
}
setup();

注意：这通常发生在每个开发人员身上，这就是为什么我建议您在javascript代码'use strict'中使用严格模式（这将为所有先前被javascript引擎忽略的静默错误抛出错误）

有关严格模式@MDN 的更多信息