JS中的变量提升[重复]

Question

我对可变提升概念有点困惑。为什么第一个console.log(flag) 输出undefined？它不应该抓住已经初始化的 false 值向上移动范围链吗？

var flag = false;
(function(){
    console.log(flag);
    var flag = true; // JavaScript only hoists declarations, not initialisations

    console.log(flag);

    if(flag){
        let name = "John";
        const age = "24";

        console.log(name);
        console.log(age);
    }

    //console.log(name); //ReferenceError: name is not defined ( as name is block scoped here )
    //console.log(age);  //ReferenceError: age is not defined ( as age is block scoped )

})();

Answer 1

在 JS 中，我们也有函数作用域，由于两个作用域中的变量名相同，全局 flag 被覆盖，因此第一个 console.log(flag) 输出未定义。考虑到这段代码：

(function(){
console.log(flag);
var flag = true;
})

应用变量提升概念，这将在内部变成这样：

(function(){
var flag=undefined;
console.log(flag);
flag = true;
})

您会因为外部范围 flag 变量而感到困惑，但由于使用了相同的命名约定，它将被功能范围 flag 变量覆盖。

Answer 2

flag 托管在 IIFE 内

var flag = false;
(function(){
    var flag; // undefined
    console.log(flag);
    flag = true; // JavaScript only hoists declarations, not initializations

    console.log(flag);

    if(flag){
        let name = "John";
        const age = "24";

        console.log(name);
        console.log(age);
    }

    //console.log(name); //ReferenceError: name is not defined ( as name is block scoped here )
    //console.log(age);  //ReferenceError: age is not defined ( as age is block scoped )

})();

Answer 3

以下情况发生：

您的声明 var flag = true; 在其执行环境中被提升。在这种情况下，这是您的功能。它有点奇怪，但只有声明的变量在没有赋值的情况下被提升。

var flag = false;
(function(){
    console.log(flag);
    var flag = true; // JavaScript only hoists declarations, not initializations

    console.log(flag);

    if(flag){
        let name = "John";
        const age = "24";

        console.log(name);
        console.log(age);
    }

    //console.log(name); //ReferenceError: name is not defined ( as name is block scoped here )
    //console.log(age);  //ReferenceError: age is not defined ( as age is block scoped )

})();