因為全部都是文字不太好理解，所以盡可能地把所有的文字都畫成了圖，便於理解。

作用域是什麽

傳統編譯流程：

JavaScript 引擎會在語法分析和代碼生成階段，通過特定的步驟，對運行性能進行優化。包括冗余元素優化等。

JavaScript 編譯，大部分情況下，發生在代碼執行前的幾微妙（甚至更短）。

理解作用域

引擎、編譯器、作用域

var a = 1;

以上代碼，經歷了兩個不同的聲明：

• 編譯器在編譯時的處理
• 引擎在運行時的處理

以 var a = 1; 為例，演示引擎、編譯器、作用域三者是如何工作的

變量的賦值操作會執行兩個動作：1. 編譯器在當前作用域中聲明一個變量； 2. 運行時引擎在作用域中查找該變量，找到便賦值，找不到拋出異常。

LHS && RHS

先來張圖，解釋什麽是 LHS、RHS

看下面代碼，加深理解

console.log(a); // 對 a 的引用是 RHS 引用。因為沒有對 a 賦值，而是查找並取得 a 的值。

a = 2; // 對 a 的引用是 LHS 引用。不用關心 a 的值是什麽，只需要為 = 2 這個賦值操作找到一個目標。

引擎和作用域的對話

以下面代碼為例：

function foo(a) {
    console.log(a);
}
foo(2);

小測驗

把自己當做引擎，同作用域進行一次“對話”。

function foo(a) {
    
 
var b = a;
    return a + b;
}
var c = foo(2);

1. 找到其中所有的LHS查詢。(這裏有3處!)

2. 找到其中所有的RHS查詢。(這裏有4處!)

作用域嵌套

當一個塊或函數嵌套在另一個塊或函數中時，就發生了作用域嵌套。因此，在當前作用域中無法找到該變量時，引擎會在當前嵌套的作用域的外層繼續查找，直到找到該變量，或抵達最外層作用域（全局作用域為止）。

看以下代碼：

function foo(a) {
    return a + b;
}

var b = 1;
foo(2);

對 b 進行的 RHS 引用無法在函數 foo 內部完成，但可以在上一級作用域(在這個例子中就 是全局作用域)中完成。

我們來模擬一下以上代碼的引擎與作用域的對話。

註：以上所有的文字、代碼都是本人一個字一個字敲上去的，圖片也是一張一張畫出來的，轉載請註明出處，謝謝！

一、作用域是什麽 （學習筆記）—— 《你不知道的JavaScript》