範圍，或確定變數(shù)所在位置的一組規(guī)則，是任何程式語言的最基本概念之一。事實上，它是如此基本，以至於我們很容易忘記這些規(guī)則是多麼微妙！

確切理解JavaScript 引擎如何「思考」作用域將使您避免編寫提升可能導致的常見錯誤，讓您做好準備專注於閉包，並讓您離永遠不再編寫錯誤更近一步再次。

...無論如何，它會幫助您理解提升和關閉。

在本文中，我們將了解：

• JavaScript 中作用域的基礎知識
• 解釋器如何決定哪些變數(shù)屬於哪個作用域
• 吊掛的實際運作原理
• ES6 關鍵字 let 和 const 如何改變遊戲規(guī)則

讓我們深入探討。

如果您有興趣了解有關 ES6 的更多資訊以及如何利用語法和功能來改進和簡化 JavaScript 程式碼，為什麼不看看這兩門課程：

詞法範圍

如果您之前寫過一行 JavaScript，您就會知道定義變數(shù)的位置決定了您可以使用的位置> 他們。變數(shù)的可見性取決於原始碼的結構，這一事實稱為詞法?? 範圍。

在 JavaScript 中建立作用域有三種方法：

1. 建立函數(shù)。在函數(shù)內(nèi)部宣告的變數(shù)僅在該函數(shù)內(nèi)部可見，包括在巢狀函數(shù)中。
2. 使用 let 或 const 在程式碼區(qū)塊內(nèi)宣告變數(shù)。此類聲明僅在區(qū)塊內(nèi)可見。
3. 建立catch 區(qū)塊。不管你相信與否，這實際上確實創(chuàng)建了一個新的範圍！

"use strict";
var mr_global = "Mr Global";

function foo () {
    var mrs_local = "Mrs Local";
    console.log("I can see " + mr_global + " and " + mrs_local + ".");
    
    function bar () {
        console.log("I can also see " + mr_global + " and " + mrs_local + ".");
    }
}

foo(); // Works as expected

try {
    console.log("But /I/ can't see " + mrs_local + "."); 
} catch (err) {
    console.log("You just got a " + err + ".");
}

{
    let foo = "foo";
    const bar = "bar";
    console.log("I can use " + foo + bar + " in its block...");
}

try {
    console.log("But not outside of it.");   
} catch (err) {
    console.log("You just got another " + err + ".");
}

// Throws ReferenceError!
console.log("Note that " + err + " doesn't exist outside of 'catch'!") 

上面的程式碼片段示範了所有三種作用域機制。您可以在 Node 或 Firefox 中運行它，但 Chrome 還無法與 let 很好地配合。

我們將詳細討論其中的每一個。讓我們先詳細了解 JavaScript 如何確定哪些變數(shù)屬於哪個作用域。

編譯過程：鳥瞰

當您執(zhí)行一段 JavaScript 時，會發(fā)生兩件事使其正常運作。

1. 首先，編譯您的原始碼。
2. 然後，編譯後的程式碼將會執(zhí)行。

在編譯步驟期間，JavaScript 引擎：

1. 記下所有變數(shù)名稱
2. 將它們註冊到適當?shù)墓爣?/li>
3. 為自己的價值觀保留空間

只有在執(zhí)行期間，JavaScript 引擎才真正將變數(shù)引用的值設為等於其賦值。在那之前，它們是 undefined。

第 1 步：編譯

// I can use first_name anywhere in this program 
var first_name = "Peleke";

function popup (first_name) {
    // I can only use last_name inside of this function
    var last_name = "Sengstacke";
    alert(first_name + ' ' + last_name);
}

popup(first_name);

讓我們逐步了解編譯器的作用。

首先，它會讀取行 var first_name = "Peleke"。接下來，它確定將變數(shù)保存到的範圍。因為我們位於腳本的頂層，所以它意識到我們處於全域範圍。然後，它將變數(shù) first_name 儲存到全域範圍，並將其值初始化為 undefined。

其次，編譯器會讀取帶有 function popup (first_name) 的行。因為 function 關鍵字是該行的第一個內(nèi)容，因此它為函數(shù)建立一個新作用域，將函數(shù)的定義註冊到全域作用域，並查看內(nèi)部以尋找變數(shù)宣告。

果然，編譯器找到了一個。由於我們函數(shù)的第一行有var last_name = "Sengstacke"，因此編譯器會將變數(shù)last_name 儲存到</em> class=" inline">popup —不到全域範圍— 並將其值設為undefined。

由於函數(shù)內(nèi)不再有變數(shù)聲明，編譯器將退回到全域作用域。由於不再有變數(shù)聲明，因此此階段已完成。

請注意，我們實際上還沒有運行任何東西。 此時編譯器的工作只是確保它知道每個人的名字；它不關心他們做什麼。

此時，我們的程式知道：

1. 全局范圍內(nèi)有一個名為 first_name 的變量。
2. 全局范圍內(nèi)有一個名為 popup 的函數(shù)。
3. 在 popup 范圍內(nèi)有一個名為 last_name 的變量。
4. first_name 和 last_name 的值均為 undefined。

它并不關心我們是否在代碼中的其他地方分配了這些變量值。引擎在執(zhí)行時會處理這個問題。

第 2 步：執(zhí)行

在下一步中，引擎再次讀取我們的代碼，但這一次，執(zhí)行它。

首先，它讀取行 var first_name = "Peleke"。為此，引擎會查找名為 first_name 的變量。由于編譯器已經(jīng)用該名稱注冊了一個變量，引擎會找到它，并將其值設置為 "Peleke"。

接下來，它讀取行 function popup (first_name)。由于我們沒有在這里執(zhí)行該函數(shù)，因此引擎不感興趣并跳過它。

最后，它讀取行 popup(first_name)。由于我們在這里執(zhí)行一個函數(shù)，因此引擎：

1. 查找 popup 的值
2. 查找 first_name 的值
3. 將 popup 作為函數(shù)執(zhí)行，并傳遞 first_name 的值作為參數(shù)

當執(zhí)行 popup 時，它會經(jīng)歷相同的過程，但這次是在函數(shù) popup 內(nèi)。它：

1. 查找名為 last_name 的變量
2. 將 last_name 的值設置為等于 "Sengstacke"
3. 查找 alert，將其作為函數(shù)執(zhí)行，并以 "Peleke Sengstacke" 作為參數(shù)

事實證明，幕后發(fā)生的事情比我們想象的要多得多！

既然您已經(jīng)了解了 JavaScript 如何讀取和運行您編寫的代碼，我們就準備好解決一些更貼近實際的問題：提升的工作原理。

顯微鏡下的吊裝

讓我們從一些代碼開始。

bar();

function bar () {
    if (!foo) {
        alert(foo + "? This is strange...");
    }
    var foo = "bar";
}

broken(); // TypeError!
var broken = function () {
    alert("This alert won't show up!");
}

如果運行此代碼，您會注意到三件事：

1. 在分配之前，您可以引用 foo，但其值為 undefined。
2. 您可以在定義之前調(diào)用 已損壞的，但您會收到 TypeError。
3. 您可以在定義之前調(diào)用 bar，它會按需要工作。

提升是指 JavaScript 使我們聲明的所有變量名稱在其作用域內(nèi)的任何地方都可用，包括在我們分配給它們之前 .

代碼段中的三種情況是您在自己的代碼中需要注意的三種情況，因此我們將一一逐步介紹它們。

提升變量聲明

請記住，當 JavaScript 編譯器讀取像 var foo = "bar" 這樣的行時，它會：

1. 將名稱 foo 注冊到最近的范圍
2. 將 foo 的值設置為未定義

我們可以在賦值之前使用 foo 的原因是，當引擎查找具有該名稱的變量時，它確實存在。這就是為什么它不會拋出 ReferenceError。

相反，它獲取值 undefined，并嘗試使用該值執(zhí)行您要求的任何操作。通常，這是一個錯誤。

記住這一點，我們可能會想象 JavaScript 在我們的函數(shù) bar 中看到的更像是這樣：

function bar () {
    var foo; // undefined
    if (!foo) {
        // !undefined is true, so alert
        alert(foo + "? This is strange...");
    }
    foo = "bar";
}

如果您愿意的話，這是提升的第一條規(guī)則：變量在其整個范圍內(nèi)都可用，但其值為 undefined ，直到您代碼分配給他們。

常見的 JavaScript 習慣用法是將所有 var 聲明寫入其作用域的頂部，而不是首次使用它們的位置。用 Doug Crockford 的話來說，這可以幫助您的代碼閱讀更像它運行。

仔細想想，這是有道理的。當我們以 JavaScript 讀取代碼的方式編寫代碼時，為什么 bar 的行為方式非常清楚，不是嗎？那么為什么不一直這樣寫呢？

提升函數(shù)表達式

事實上，當我們在定義之前嘗試執(zhí)行 broken 時，我們得到了 TypeError，這只是第一條提升規(guī)則的一個特例。

我們定義了一個名為 broken 的變量，編譯器會在全局范圍內(nèi)注冊該變量，并將其設置為等于 undefined。當我們嘗試運行它時，引擎會查找 broken 的值，發(fā)現(xiàn)它是 undefined，并嘗試將 undefined 作為函數(shù)執(zhí)行.

顯然，undefined 不是一個函數(shù)，這就是為什么我們得到 TypeError！

提升函數(shù)聲明

最后，回想一下，在定義 bar 之前，我們可以調(diào)用它。這是由于第二條提升規(guī)則：當 JavaScript 編譯器找到函數(shù)聲明時，它會使其名稱和定義在其作用域的頂部可用。再次重寫我們的代碼：

function bar () {
    if (!foo) {
        alert(foo + "? This is strange...");
    }
    var foo = "bar";
}

var broken; // undefined

bar(); // bar is already defined, executes fine

broken(); // Can't execute undefined!

broken = function () {
    alert("This alert won't show up!");
}

同樣，當您編寫作為JavaScript讀取時，它更有意義，您不覺得嗎？

查看：

1. 變量聲明和函數(shù)表達式的名稱在其整個范圍內(nèi)都可用，但它們的值在賦值之前為 undefined。
2. 函數(shù)聲明的名稱??和定義在其整個范圍內(nèi)都可用，甚至在其定義之前。

現(xiàn)在讓我們來看看兩個工作方式稍有不同的新工具：let 和 const。

<strong>let</strong>、<strong></strong>const 和臨時死區(qū)<強>

"use strict"; 
// You have to "use strict" to try this in Node
broken(); // ReferenceError!
let broken = function () {
    alert("This alert won't show up!");
}

// This is legal
const React = require('react');

// This is totally not legal
const crypto;
crypto = require('crypto');

"use strict";

{
  let foo = "foo";
  if (foo) {
      const bar = "bar";
      var foobar = foo + bar;

      console.log("I can see " + bar + " in this bloc.");
  }
  
  try {
    console.log("I can see " + foo + " in this block, but not " + bar + ".");
  } catch (err) {
    console.log("You got a " + err + ".");
  }
}

try {
  console.log( foo + bar ); // Throws because of 'foo', but both are undefined
} catch (err) {
  console.log( "You just got a " + err + ".");
}

console.log( foobar ); // Works fine

var foo = {
    name: 'Foo',
    languages: ['Spanish', 'French', 'Italian'],
    speak : function speak () {
        this.languages.forEach(function(language) {
            console.log(this.name + " speaks " + language + ".");
        })
    }
};

foo.speak();

function foo () {
    var bar = "bar";
    function baz () {
        // Reusing variable names like this is called "shadowing" 
        var bar = "BAR";
        console.log(bar); // BAR
    }
    baz();
}

foo(); // BAR

var foo = {
    name: 'Foo',
    languages: ['Spanish', 'French', 'Italian'],
    speak_self : function speak_s () {
        var self = this;
        self.languages.forEach(function(language) {
            console.log(self.name + " speaks " + language + ".");
        })
    },
    speak_bound : function speak_b () {
        this.languages.forEach(function(language) {
            console.log(this.name + " speaks " + language + ".");
        }.bind(foo)); // More commonly:.bind(this);
    }
};

var foo = {
    name: 'Foo',
    languages: ['Spanish', 'French', 'Italian'],
    speak : function speak () {
        this.languages.forEach((language) => {
            console.log(this.name + " speaks " + language + ".");
        })
    }
};???