JavaScript变量如何工作?

问题描述

我知道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变量如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！