相同的变量声明了两次。使用的是哪一种？ -- JAVASCRIPT [重复]答案

【问题标题】：Same variable declared twice. Which is one used? -- JAVASCRIPT [duplicate]相同的变量声明了两次。使用的是哪一种？ -- JAVASCRIPT [重复]
【发布时间】：2017-12-21 09:58:58
【问题描述】：

下面的代码将产生8，因为第二个声明将覆盖第一个声明。是的！完全有道理。

示例 1

function foo(){
    function bar() {
        return 3;
    }
    return bar();
    function bar() {
        return 8;
    }
}
console.log(foo()); // ---> 8

以下代码生成3，这意味着它是第一个被调用的表达式。

示例 2

function foo(){
    var bar = function() {
        return 3;
    };
    return bar();
    var bar = function() {
        return 8;
    };
}
console.log(foo()); // ---> 3

我倾向于得出结论，在 JavaScript 中，只使用第一个声明的变量，如上所示。但是，下面的代码会产生7（嗯……挠头）

示例 3

var a = 4;
var a = 7;
console.log(a); //---> 7

最终，我将使用let 或const（以防止多次声明同一个变量）来声明变量而不是var，但我试图理解为什么示例2和3中产生的结果如此难以预测。谢谢。

【问题讨论】：

只有一个变量（声明被提升），但赋值（初始化）按顺序发生。
为什么让 a=1; let a =1 给出错误？

标签： javascript scope hoisting

【解决方案1】：

示例 1 等价于以下代码。这里bar 在return 之前被覆盖，因此它使用分配给它的最后一个值进行评估。更多关于你可以阅读Variable and Function Hoisting。

function foo(){
    function bar() {
        return 3;
    }
    
    function bar() {
        return 8;
    }
    
    return bar(); 
}
console.log(foo());

示例 2 等价于以下代码。在这里您可以看到bar 只声明了一次，并为其分配了第一个值。第二个赋值是在返回之后完成的，所以代码没有到达它。而return 是在第一次赋值时执行的。

function foo(){
    var bar;
    bar = function() {
        return 3;
    };
    
    return bar();
    
    bar = function() {
        return 8;
    };
}
console.log(foo());

例子3呢，当你用var多次声明同一个变量时，后面的vars就被忽略了。就这样

var a = 4;
a = 7;
console.log(a);

【讨论】：

完全有道理。谢谢

【解决方案2】：

不，只是声明函数的方式有所不同。

这正是var functionName = function() {}和function functionName() {}之间的区别

假设你有两个函数。

var function1 = function() {

};
function function2() {

}

不同之处在于function1 是一个函数表达式，因此仅在到达该行时才定义。

function1();
var function1 = function() {

};

当编译器到达这一行时会抛出function1 is not defined这样的错误。

function2 是一个函数声明，它是全局的（由于提升）。

function2();
function function2() {

}

此代码将调用function2 函数。

因此，在您的第一个示例中，它与 function2 相同（有一个函数声明）。

在您的第二个示例中，它与 function1 相同（有一个函数表达式）

【讨论】：