JavaScript 变量如何工作? [英] How do JavaScript variables work?

问题描述

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

I know that JavaScript vars point to a value:

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

所以在那个例子中，我改变了 foo 指向 true -> foo 指向 false，但如果我这样做:

So in that example I've changed foo pointing to true -> foo pointing to false, but if I do:

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

我是否为每次迭代都创建了一个新变量?

Am I creating a new var for each iteration?

以下两种做法有什么不同吗?

Is there any difference in the following two ways of doing the same?

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

和

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

如果是，为什么?

推荐答案

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

There is no block scope in Javascript ES5 and earlier, only function scope. Furthermore, the declarations of all javascript variables declared within a function scope are automatically "hoisted" to the top of the function.

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

So, declaring a variable within a loop isn't doing anything different than declaring it at the top of the function and then referencing it within the loop.

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

See these two references for some useful explanation: http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting and http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-hoisting-explained/.

注意:对变量的赋值没有提升，只是变量的声明.所以，如果你这样做:

Note: the assignment to a variable is not hoisted, just the declaration of the variable. So, if you do this:

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(立即调用的函数表达式):

If you wanted to create a new scope inside your for loop, you could use an IIFE (immediately invoked function expression) like this:

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
        })();
    }
}

<小时>

2015 年更新. ES6(或有时称为 ES2015)提供了 let 声明，它确实提供了块作用域.在这种情况下，let 变量声明只会提升到当前块作用域的顶部.截至 2015 年年中，这尚未在浏览器中广泛实现，但即将推出，可在 node.js 等服务器端环境中或通过转译器使用.

---

Update in 2015. ES6 (or sometimes called ES2015) offers the let declaration which does offer block scope. In that case a let variable declaration is hoisted only to the top of the current block scope. As of mid 2015, this is not yet widely implemented in browsers, but is coming soon and it is available in server-side environments like node.js or via transpilers.

所以，在 ES6 中，如果你这样做:

So, in ES6 if you did this:

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

i 和 someVar 都只是循环的局部变量.

Both i and someVar would be local to the loop only.

这篇关于JavaScript 变量如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！