JavaScript 变量如何工作？

Question

我知道 JavaScript 变量指向一个值：

var foo = true;
//... later 
foo = false;

因此在该示例中，我将 foo 更改为指向 true -> foo 指向 false，但如果我这样做：

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

我是否为每次迭代创建一个新的 var？

下面两种方法做同样的事情有什么区别吗？

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

如果是

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

这样，为什么？

Answer 1

Javascript ES5 及更早版本中没有块作用域，只有函数作用域。此外，在函数作用域内声明的所有 JavaScript 变量的声明都会自动“提升”到函数的顶部。

因此，在循环中声明变量与在函数顶部声明变量然后在循环中引用它没有任何不同。

请参阅这两个参考资料以获取一些有用的解释： http://www.adequatelygood .com/2010/2/JavaScript-Scoping-and-Hoisting 和 http://net.tutsplus.com/tutorials/javascript -ajax/quick-tip-javascript-hoisting-explained/。

注意：对变量的赋值并没有提升，只是变量的声明。因此，如果您这样做：

function a() {
    for (var i=0; i<100; i++){
        var myvar = i;
    }
}

它的工作原理如下：

function a() {
    var myvar;
    for (var i=0; i<100; i++){
        myvar = i;
    }
}

如果您想在 for 循环中创建一个新作用域，您可以使用 IIFE（立即调用函数表达式），如下所示：

function a() {
    for (var i=0; i<100; i++){
        (function() {
            var myvar = i;
            // myvar is now a separate variable for each time through the for loop
        })();
    }
}

---

Update 2015 年。 ES6（或有时称为 ES2015）提供了 let 声明，该声明确实提供了块作用域。在这种情况下，let 变量声明仅提升到当前块作用域的顶部。截至 2015 年中期，该功能尚未在浏览器中广泛实现，但即将推出，并且可以在 Node.js 等服务器端环境中或通过转译器使用。

因此，在 ES6 中，如果您这样做：

for (let i=0; i<100; i++){
    let someVar = i;
}

i 和 someVar 都将仅在循环中是本地的。

Answer 2

不，没有什么区别；在 JavaScript 中，变量的作用域是函数级别，而不是块级别。

Answer 3

像 JSLint 这样的工具建议您将所有 var 语句放在函数的顶部。这是因为如果您不这样做，JavaScript 本质上会为您做这件事，所以如果您这样做，也不会那么混乱。在您的示例中，将 var 放在何处并不重要，只要它出现在 myvar 的一个定义之前即可。同样，您也可以在函数顶部声明i。

更有趣的是分层的作用域链，JavaScript 在需要查找名称时会在其中搜索名称。它从本地到全局搜索作用域链，直到找到所述名称的第一个实例。

这就是为什么你可以玩这样的游戏来惹恼你的朋友：

function foofinder() {
    var bar = function () { return foo; },
        foo="beers";
    return bar();
}

foofinder();
>>> "beers"

Answer 4

正如 @icktoofay 所说，在 javascript 中没有区别。在某些语言中，在每次迭代时，变量都会被实例化，然后超出范围，并被垃圾收集。

要在 javascript 中模拟这一点，您可以这样做：

for (var i=0; i<100; i++){
    (function(){
        var myvar = i;
    })();
}

在这种情况下，myvar 仅存在于匿名函数的范围内，因此在每次迭代时，都会创建一个新的 myvar 实例。

Answer 5

通过在变量名之前不断声明 var，您可以指示 JavaScript 引擎或解释器将变量重新初始化为未定义的值（undefined 而不是数字，字符串/文本、布尔值或 null) 之前的赋值，这将是额外的指令，减慢循环执行的速度。您还增加了代码大小并降低了解析/解释/编译代码的速度。

对于几乎任何应用程序，都不存在功能差异，但仍然存在差异，并且在执行数十万或数十亿次循环后，差异可能会很明显。但是，在函数中重复使用相同名称的 VAR 声明会在 Chrome / V8 中导致致命异常。

更新：在变量名称之前使用 var 明显比省略 var 慢，如使用 JavaScript 控制台在 Chrome / v8 上运行的以下基准测试所示。

var startTime = new Date().getTime();
var myvar;
for (var i=0; i<100000; i++){
    myvar = i;
}
console.log(new Date().getTime() - startTime);

var startTimx = new Date().getTime();
var myvax;
for (var j=0; j<100000; j++){
var myvax = j;
}
console.log(new Date().getTime() - startTimx);
161
169

第一个测试执行时间为 161 毫秒，第二个测试（使用 var）执行时间为 169 毫秒。相差 7 毫秒，在多次运行基准测试后保持一致。

整个基准测试被粘贴到 Chrome JavaScript 控制台中，然后在执行之前进行编译，这就是为什么第一个输出不会出现在第一次调用 console.log() 的下方。

自己尝试一下吧！