在for-loop，javascript中声明的变量的范围

Question

我在eclipse中遇到错误：

for (var i = 0; i < foo; i++) {
    ...
}
...
while (someCondition) {
    for (var i = 0; i < bar; i++) {
    ...
    }
}

循环使用相同的变量名。 Eclipse给了我'i' is already defined的警告。如果我删除第二个for循环的var som，它不会给我一个警告。

AFAIK在for循环中声明的变量（在本例中为i）与循环具有相同的范围。

Eclipse是否正确？那些i - 变量是否在同一范围内？

Answer 1

JavaScript中的局部变量作用于封闭函数。因此，i都具有相同的范围。

为了说明，

function f() {
  ...
  for (var i = ...; ...; ...) {
    ...
  }
}

相当于

function f() {
  var i;
  ...
  for (i = ...; ...; ...) {
    ...
  }
}

Answer 2

两个i - 变量都在同一范围内，因为JavaScript变量传统上都有functional scope。

功能范围：

功能范围意味着变量在the function中已知，从声明之后开始声明。

功能范围的变量是这样创建的：

var myVariable = "Some text";

功能范围可以这样理解：

// i IS NOT known here

function doSomething() {
    // i IS NOT known here
    for (var i = 0; i < bar; i++) {
        // i IS known here
    }
    // i IS known here
}

// i IS NOT known here

阻止范围

最新的JavaScript规范现在也允许阻止范围：变量在声明的the block中是已知的，从声明它们之后开始。

块范围变量的创建方式如下：

let myVariable = "Some text";

块范围可以这样理解：

// i IS NOT known here

function doSomething() {
    // i IS NOT known here
    for (let i = 0; i < bar; i++) {
        // i IS known here
    }
    // i IS NOT known here
}

// i IS NOT known here

两个范围之间的差异

要了解功能范围和块范围之间的区别，请考虑以下代码：

// i IS NOT known here
// j IS NOT known here

function loop(arr) {
    // i IS NOT known here
    // j IS NOT known here

    for( var i = 0; i < arr.length; i++ ) {
        // i IS known here
        // j IS NOT known here
    };

    // i IS known here
    // j IS NOT known here

    for( let j = 0; j < arr.length; j++ ) {
        // i IS known here
        // j IS known here
    };

    // i IS known here
    // j IS NOT known here
}

// i IS NOT known here
// j IS NOT known here

在这里，我们可以看到我们的变量j仅在第一个for循环中已知，但在之前和之后都不知道。然而，我们的变量i在从定义之后的整个函数中就已知。

今天使用块范围变量是否安全？

今天是否安全使用取决于您的环境：

• 如果您正在编写服务器端JavaScript代码（Node.js），则可以安全地使用let语句。

• 如果您正在编写客户端JavaScript代码并使用转换器（如Traceur），则可以安全地使用let语句，但您的代码很可能是在性能方面不是最佳的。

• 如果您正在编写客户端JavaScript代码并且不使用转换器，则需要考虑浏览器支持。

  今天，2016年2月23日，这些是一些不支持let或只有部分支持的浏览器：

  • Internet Explorer 10 及以下（不支持）
  • Firefox 43 及以下（不支持）
  • Safari 9 及以下（不支持）
  • Opera Mini 8 及以下（不支持）
  • Android浏览器4 及以下（不支持）
  • Opera 36 及以下（部分支持）
  • Chome 51 及以下（部分支持）

如何跟踪浏览器支持

有关哪些浏览器在您阅读此答案时支持let语句的最新概述，请参阅this Can I Use page。