在學習 javascript 的過程中，我們第一步最應該瞭解和掌握的就是作用域，與之相關還有程序是怎麼編譯的，變量是怎麼查找的，js 引擎是什麼，引擎和作用域的關係又是什麼，這些是 javascript 這門語言最基礎的地基，至於對象、函數、閉包、原型鏈、作用域鏈以及設計模式等等都是地基以上的建築，只有地基打牢了，建築纔會穩。同樣只有先把最基礎的部分掌握了，之後的擴展學習纔會更容易。
這一節我要說的，就是作用域和編譯原理，從這裏開始，我會一點點的把深入學習 javascript 的過程中總結的知識點以及遇到的問題，一篇一篇的梳理出來，如果有志同道合的朋友，可以關注我這個系列，我們一起玩轉 javascript。
1. 編譯原理
大家通常把 javascript 歸類爲一種“動態”或“解釋執行”的語言，但事實上，它是一門編譯語言，但和傳統的編譯語言不同，它不是提前編譯的，編譯結果也不能進行移植。
在傳統編譯語言中，程序在執行之前會經歷三個步驟，統稱爲“編譯”：
- 分詞/詞法分析
這個過程會把字符串分解成有意義的代碼塊，這些代碼塊被稱爲詞法單元。
例如 var a = 5; 這段程序通常會被分解成下面這些詞法單元： var、a、=、5、; 。空格是否會被當成詞法單元取決於空格在這門語言中是否有意義。 - 解析/語法分析
這個過程是將詞法單元流（數組）轉換成一個由元素逐級嵌套所組成的代表了程序語法結構的樹。這個樹被稱爲“抽象語法樹”（Abstract Syntax Tree，AST）。
var a = 5; 的抽象語法樹中可能如下圖所示：![]()
抽象語法樹
- 代碼生成
將 AST 轉換爲可執行代碼的過程被稱爲代碼生成。這個過程與語言、目標平臺等息息相關。簡單來說，就是通過某種方法可以將 var a = 5; 的 AST 轉化爲一組機器指令，用來創建一個叫做 a 的變量（包括分配內存等），並將一個值 5 存儲在 a 中。
比起那些編譯過程只有三個步驟的語言的編譯器來說，javascript 引擎要複雜的多。
例如，在詞法分析和代碼生成階段有特定的步驟來對運行性能進行優化，包括對冗餘元素進行優化等。
首先我們要清楚，javaScript 引擎不會有太多的時間來進行優化（相對於其它語言的編譯器來說），因爲與其它語言不同，javascript 的編譯過程不是發生在構建之前的。
對於 javascript 來說，大部分情況下編譯發生在代碼執行前的幾微秒（甚至更短）的時間內。在我們將要討論的作用域背後，javascript 引擎用盡了各種辦法（比如 JIT，可以延遲編譯甚至重新編譯）來保證性能最佳。
總結來說，任何 javascript 代碼片段在執行前都要進行編譯（預編譯）。因此，javascript 編譯器首先會對 var a = 5; 這段程序進行編譯，然後做好執行它的準備，並且通常馬上就會執行它。
2. 三位好友
要真正理解作用域，我們首先要知道 javascript 中有三位好朋友：
- 引擎
從頭到尾負責整個 javascript 程序的編譯及執行過程。 - 編譯器
負責語法分析及代碼生成。 - 作用域
負責收集並維護由所有聲明的標識符（變量）組成的一系列查詢，並實施一套非常嚴格的規則，確定當前執行的代碼對這些標識符的訪問權限。
當遇見 var a = 5; 這一段代碼時，其實執行了兩個步驟：
（1）var a; 編譯器會詢問作用域是否已經有一個該名稱的變量存在於同一作用域的集合中。如果是，編譯器會忽略該聲明，繼續進行編譯，否則它會要求在當前作用域的集合中聲明一個新的變量，並命名爲 a 。
（2）a = 5; 編譯器會爲引擎生成運行時所需的代碼，這些代碼用來處理 a = 5; 這個賦值操作。引擎運行時會首先詢問作用域，在當前作用域的集合中是否存在一個叫作 a 的變量，如果是，引擎就會使用這個變量。如果否，引擎會繼續向父級作用域中查找，直到找到全局作用域，如果在全局作用域中仍沒有找到 a ，那麼在非嚴格模式下，引擎會爲全局對象新建一個屬性 a ，並將其賦值爲5，在嚴格模式下，引擎會報錯誤 ReferenceError: a is not defined。
總結來說，變量的賦值會執行兩個操作，首先編譯器會在當前作用域聲明一個變量（如果之前沒有聲明過），然後在運行時引擎會在當前作用域中查找該變量（找不到就向上一級作用域查找），如果能夠找到就會對它賦值。
3. LHS 和 RHS
前面說到引擎在爲變量賦值的時候會在作用域中查找變量，但是執行怎樣的查找，用什麼方式，會對最終的查找結果造成影響。
在 var a = 5; 這個例子中，引擎會對 a 進行 LHS 查詢，當然，另外一個查找類型叫作 RHS。
對變量進行賦值所執行的查詢叫 LHS（Left-hand Side）。
找到並使用變量值所執行的查詢叫 RHS（Right-hand Side）。
舉個例子：
function foo(a) {
// 這裏隱式包含了 a = 2 這個賦值，所以對 a 進行了 LHS 查詢
var b = a;
// 這裏對 a 進行了 RHS 查詢，找到 a 的值，然後對 b 進行 LHS 查詢，把 2 賦值給 b
return a + b;
// 這裏包含了對 a 和 b 進行的 RHS 查詢
}
var c = foo(2);
// 這裏首先對 foo 進行 RHS 查詢，找到它是一個函數，然後對 c 進行 LHS 查詢把 foo 賦值給 c
所以上面的例子共包含 3 個 LHS 查詢和 4 個 RHS 查詢，你們都找對了嗎？
4. 作用域嵌套
當一個塊或函數嵌套在另一個塊或函數中時，就發生了作用域嵌套。因此，在當前作用域中無法找到某個變量時，引擎就會在外層嵌套的作用域中繼續查找，直到找到該變量，或抵達最外層的作用域（也就是全局作用域）爲止。
舉個例子：
function foo(a) {
console.log(a + b);
}
var b = 2;
foo(2); // 4
這裏對 b 進行的 RHS 查詢在 foo 作用域中無法找到，但可以在上一級作用域（這個例子中就是全局作用域）中找到。
總結來說，遍歷嵌套作用域鏈的規則很簡單：引擎從當前執行的作用域中開始查找變量，如果都找不到，就向上一級繼續查找。當抵達最外層的全局作用域時，無論找到還是沒找到，查找過程都會停止。