吊装和可变范围 [英] Hoisting and variable scope

问题描述

有人会帮助解释为什么下面的两个代码片段打印出不同的结果吗?

Would someone help explain why the two snippets of code below print out different results?

区别在于条件语句内.在第一个中，有一个名为'Jack'的局部变量分配给name，条件是真实的(意味着！name的值为true).在第二个中，为全局变量名称分配了相同的名称"Jack"，但条件是虚假的(！name为false).我的问题是，如果其他所有条件都相同，那么如果在条件主体内部 进行了更改，为什么第一个条件为true，而第二个条件为false?

The difference is inside the conditional statement. In the first, there is a local variable assignment of 'Jack' to name, and the conditional is truthy (meaning !name evaluates to true). In the second, the same name 'Jack' is assigned but to the global variable name, but the conditional is falsy (!name is false). My question is, if all else is the same, why would the first conditional be true and the second is false if what is changed is inside the conditional body?

我唯一的解释是条件的主体是由JS解释器 first 读取的，这是它确定 name 是全局/局部变量还是变量的方式是否需要悬挂声明，最后记录不同的名称值.

My only explanation is that the body of the conditional is read by the JS interpreter first, which is how it determines whether name is global/local, whether the variable declaration needs to be hoisted or not, and finally, the different name values logged.

在开始解释其主体之前，是否应该先评估条件布尔值?然后在两种情况下，变量名称"都将被评估为未定义" ...任何帮助将不胜感激！

Shouldn't the conditional boolean be evaluated first before even starting to interpret its body? Then in both cases, variable 'name' would be evaluated as 'undefined'... Any help would be greatly appreciated!

关于提升/作用域上下文，确实有一些很好的资源，但是我找不到一个专门回答此问题的资源.

There are a few really good resources about hoisting/scope contexts but I'm not finding one that specifically answers this question.

http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

var name = "Paul"; 
function users () {
    if (!name) {
        var name = "Jack";  //<== difference is here, *inside* conditional body
    }
    console.log(name);
}
users(); //outputs "Jack"

vs.

var name = "Paul"; 
function users () {
    if (!name) {
       name = "Jack";  //<== difference is here, *inside* conditional body
    }
    console.log(name);
}
users();  //outputs "Paul"

推荐答案

变量声明位于执行上下文的顶部，在这种情况下为函数用户.重写这些内容以从悬挂的角度显示外观通常可以消除任何混乱

Variable declarations hoist to the top of the execution context, in this case the function users. Rewriting these to show how it looks from the hoisted perspective often clears up any confusion

var name = "Paul"; 
function users () {
    var name;//<- hoisted variable declaration
    if (!name) {
        name = "Jack";
    }
    console.log(name);
}
users(); //outputs "Jack"

vs.

var name = "Paul"; 
function users () {
    if (!name) {//no hoisted variable declaration, uses global
       name = "Jack";
    }
    console.log(name);
}
users();  //outputs "Paul"

执行上下文包含几个关键组件，其中最相关的是词汇环境和变量环境.如果您对此感兴趣，我将更深入地介绍两者之间的区别(以及一些简要的历史记录): https://stackoverflow.com/a/32573386/1026459

Execution contexts contain several key components, the most relevant here are the lexical environment and variable environment. I cover the differences between the two (and some brief history) in more depth if you are interested here: https://stackoverflow.com/a/32573386/1026459

这篇关于吊装和可变范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！