Scope, or a set of rules that determines where a variable should be located, is one of the most fundamental concepts of any programming language. In fact, it's so basic that we can easily forget how subtle these rules are!

Understanding exactly how the JavaScript engine "thinks" scope will allow you to avoid common mistakes that can result from writing hoisting, prepare you to focus on closures, and get you one step closer to never writing them again again.

...Anyway, it will help you understand lifting and closing.

In this article we will learn about:

• Basic knowledge of scope in JavaScript
• How the interpreter decides which variables belong to which scope
• The actual working principle of hoisting
How the
• ES6 keywords let and const change the game

Let’s dig into it.

If you are interested in learning more about ES6 and how to take advantage of syntax and features to improve and simplify your JavaScript code, why not check out these two courses:

lexical scope

If you've ever written a line of JavaScript before, you'll know that where you define variables determines where you can use > them. The fact that a variable's visibility depends on the structure of the source code is called lexical scope.

There are three ways to create a scope in JavaScript:

1. Create function. Variables declared inside a function are only visible inside that function, including within nested functions.
2. Use let or const Declare variables within a code block. Such declarations are only visible within blocks.
3. Create catch Block. Believe it or not, this actually really creates a new scope!

"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'!") 

let yet.

First, compile your source code.
Then, the compiled code will be executed.

compilation step , the JavaScript engine:

Write down all variable names
Register them to the appropriate scope
Keep space for your own values

execution does the JavaScript engine actually set the value of a variable reference to be equal to its assigned value. Until then, they are undefined.

// 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". Next, it determines the scope into which the variable is saved. Because we are at the top level of the script, it realizes that we are in global scope. It then saves the variable first_name to the global scope and initializes its value to undefined.

function popup (first_name). Because the function keyword is the first thing on the line, it creates a new scope for the function, registers the function's definition with the global scope, and looks inside to find the variable declaration.

var last_name = "Sengstacke" in the first line of our function, the compiler will save the variable last_name to the scope of <code class=" inline">popup</em> — not to the global scope — and set its value to undefined.

The compiler's job at this point is just to make sure it knows everyone's name; it doesn't care what they do.

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

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

第 2 步：執(zhí)行

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

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

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

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

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

當(dāng)執(zhí)行 popup 時(shí)，它會(huì)經(jīng)歷相同的過(guò)程，但這次是在函數(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í)際的問(wèn)題：提升的工作原理。

顯微鏡下的吊裝

讓我們從一些代碼開始。

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)行此代碼，您會(huì)注意到三件事：

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

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

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

提升變量聲明

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

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

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

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

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

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

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

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

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

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

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

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

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

提升函數(shù)聲明

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

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讀取時(shí)，它更有意義，您不覺得嗎？

查看：

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

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

<strong>let</strong>、<strong></strong>const 和臨時(shí)死區(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 + ".");
        })
    }
};???