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

準(zhǔn)確理解 JavaScript 引擎如何“思考”作用域?qū)⑹鼓苊饩帉懱嵘赡軐?dǎo)致的常見錯誤，讓您做好準(zhǔn)備專注于閉包，并讓您離永遠(yuǎn)不再編寫錯誤更近一步 再次。

...無論如何，它會幫助您理解提升和關(guān)閉。

在本文中，我們將了解：

• JavaScript 中作用域的基礎(chǔ)知識
• 解釋器如何決定哪些變量屬于哪個作用域
• 吊裝的實(shí)際工作原理
• ES6 關(guān)鍵字 let 和 const 如何改變游戲規(guī)則

讓我們深入探討。

如果您有興趣了解有關(guān) ES6 的更多信息以及如何利用語法和功能來改進(jìn)和簡化 JavaScript 代碼，為什么不看看這兩門課程：

詞法范圍

如果您之前編寫過一行 JavaScript，您就會知道定義變量的位置決定了您可以使用的位置> 他們。變量的可見性取決于源代碼的結(jié)構(gòu)，這一事實(shí)稱為詞法 范圍。

在 JavaScript 中創(chuàng)建作用域有三種方法：

1. 創(chuàng)建函數(shù)。在函數(shù)內(nèi)部聲明的變量僅在該函數(shù)內(nèi)部可見，包括在嵌套函數(shù)中。
2. 使用 let 或 const 在代碼塊內(nèi)聲明變量。此類聲明僅在塊內(nèi)可見。
3. 創(chuàng)建catch 塊。不管你相信與否，這實(shí)際上確實(shí)創(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'!") 

上面的代碼片段演示了所有三種作用域機(jī)制。您可以在 Node 或 Firefox 中運(yùn)行它，但 Chrome 還無法與 let 很好地配合。

我們將詳細(xì)討論其中的每一個。讓我們首先詳細(xì)了解 JavaScript 如何確定哪些變量屬于哪個作用域。

編譯過程：鳥瞰

當(dāng)您運(yùn)行一段 JavaScript 時，會發(fā)生兩件事使其正常工作。

1. 首先，編譯您的源代碼。
2. 然后，編譯后的代碼將被執(zhí)行。

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

1. 記下所有變量名稱
2. 將它們注冊到適當(dāng)?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"。接下來，它確定將變量保存到的var first_name = "Peleke"。接下來，它確定將變量保存到的范圍。因?yàn)槲覀兾挥谀_本的頂層，所以它意識到我們處于全局范圍。然后，它將變量 first_name 保存到全局范圍，并將其值初始化為 undefined范圍

全局范圍function popup (first_name)。然后，它將變量 first_name 保存到全局范圍，并將其值初始化為 。

的行。因?yàn)?var last_name = "Sengstacke"，因此編譯器會將變量 last_name 保存到 </em> class="inline">popup —不到全局范圍 — 并將其值設(shè)置為 undefinedfunction

。

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

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

第 2 步：執(zhí)行

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

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

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

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

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

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

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

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

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

顯微鏡下的吊裝

讓我們從一些代碼開始。

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!");
}

如果運(yùn)行此代碼，您會注意到三件事：

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

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

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

提升變量聲明

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

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

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

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

記住這一點(diǎn)，我們可能會想象 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 習(xí)慣用法是將所有 var 聲明寫入其作用域的頂部，而不是首次使用它們的位置。用 Doug Crockford 的話來說，這可以幫助您的代碼閱讀更像它運(yùn)行。

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

提升函數(shù)表達(dá)式

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

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

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

提升函數(shù)聲明

最后，回想一下，在定義 bar 之前，我們可以調(diào)用它。這是由于第二條提升規(guī)則：當(dāng) 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!");
}

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

查看：

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

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

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

"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 + ".");
        })
    }
};???