提升名稱解析順序在JavaScript中如何工作？

Question

我遇到了一個有趣的測驗

function bar() {
    return foo;
    foo = 10;
    function foo() {}
    var foo = '11';
}
alert(typeof bar());

我的解釋是這樣的（根據控制台，這是錯誤的:)）：

var foo; // global variable
function bar(){
    function foo(){}
    var foo;  //  Here variable foo should override foo function 
    return foo; // (according to me foo should be variable with undefined value) What is going on here, How JavaScript resolve naming order ?
    foo = 10;
    foo = "11";
}

這是我讀的引用這

在JavaScript中，名稱通過以下四種基本方式之一輸入范圍：1.Language-defined：默認情況下，所有范圍都被賦予名稱this和arguments。 2.形式參數：函數可以具有命名形式參數，其范圍僅限於該函數的主體。 3.函數聲明：這些函數的形式為foo（）{}。 4.變量聲明：這些變量聲明采用var foo;的形式。

他后來引用：

要記住的最重要的特殊情況是名稱解析順序。 請記住，名稱輸入給定范圍的方式有四種。 我在上面列出的順序是它們解決的順序。通常，如果已經定義了一個名稱，則它永遠不會被同名的另一個屬性覆蓋。 這意味着函數聲明優先於變量聲明。 這並不意味着對該名稱的分配將不起作用，只是聲明部分將被忽略。

這讓我感到困惑， 任何人都可以參考上面的示例來簡化它嗎？ 我想知道的要點：

• 如何在函數內部沒有var變量上吊起？
• 提升過程中是否發生變量超控？

Answer 1

現在暫時讓函數foo離開。 在函數內，如果在函數內的任何地方聲明了變量，則聲明將移至函數的頂部。 因此，實際上是這樣評估的

function bar() {
    var foo;
    return foo;
    foo = 10;
    foo = '11';
}

但是，當您使用相同的名稱聲明函數時，它將具有優先權，並且其計算結果與此類似

function bar() {
    var foo = function() {};
    return foo;
    foo = 10;
    foo = '11';
}

這就是為什么您在警報框中獲得function原因。

Answer 2

默認情況下，函數內部沒有var任何變量都將成為全局變量。

當您在另一個函數中有一個函數聲明時（例如您的示例中），首先將其提升，然后是變量聲明。

演示變量覆蓋的示例。

function bar() {
    var foo = 10;
    function foo() {}
    return foo;
}

bar(); //--> returns 10;

function bar() {
   var foo;
   function foo() {}
   return foo;
}

bar(); //--> returns the function object foo.