JS學習系列 01 - 編譯原理和作用域

jkyin 發布于2019-08-21 11:28 / 2780人閱讀

摘要：的抽象語法樹中可能如下圖所示代碼生成將轉換為可執行代碼的過程被稱為代碼生成。如果是，編譯器會忽略該聲明，繼續進行編譯，否則它會要求在當前作用域的集合中聲明一個新的變量，并命名為。

在學習 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。
找到并使用變量值所執行的查詢叫 RHS。

舉個例子：

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 作用域中無法找到，但可以在上一級作用域（這個例子中就是全局作用域）中找到。

總結來說，遍歷嵌套作用域鏈的規則很簡單：引擎從當前執行的作用域中開始查找變量，如果都找不到，就向上一級繼續查找。當抵達最外層的全局作用域時，無論找到還是沒找到，查找過程都會停止。

5. 總結

編譯器、引擎和作用域是 javascript 代碼執行的基礎，掌握好這些會對我們深入學習 javascript 起到事半功倍的效果，我們的學習之路才剛剛開始，大家加油！

歡迎關注我的公眾號

參考文章

《你不知道的JavaScript》

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86752.html

JS學習系列 04 - 提升

摘要：第二個賦值聲明會被留在原地等待執行階段。這個過程就叫作提升。還有一點，函數聲明會被提升，但是函數表達式不會被提升。到目前為止，大家應該很熟悉作用域的概念了，以及根據聲明的位置和方式將變量分配給作用域的相關原理了。函數作用域和塊作用域的行為是一樣的，可以總結為：任何聲明在某個作用域內的變量，都將屬于這個作用域。但是作用域同其中的變量聲明出現的位置有某種微妙的關系，而這個細節就是我們這...

liuyix 2019-08-20 14:28 評論0 收藏0
WebAssembly 系列（四）WebAssembly 工作原理

摘要：但是它們其實并不是二選一的關系并不是只能用或者。正因為如此，指令有時也被稱為虛擬指令。這是因為是采用基于棧的虛擬機的機制。聲明模塊的全局變量。。下文預告現在你已經了解了模塊的工作原理，下面將會介紹為什么運行的更快。作者：Lin Clark 編譯：胡子大哈翻譯原文：http://huziketang.com/blog/posts/detail?postId=58c77641a6d8...

stormzhang 2019-08-20 15:05 評論0 收藏0
重讀你不知道的JS (上) 第一節一章

摘要：的抽象語法樹中可能會有一個叫作的頂級節點，接下來是一個叫作它的值是的子節點，以及一個叫作的子節點。值得注意的是，是非常重要的異常類型。嚴格模式下，未聲明的和倆者行為相同，都會是。你不知道的JS(上卷)筆記你不知道的 JavaScript JavaScript 既是一門充滿吸引力、簡單易用的語言，又是一門具有許多復雜微妙技術的語言，即使是經驗豐富的 JavaScript 開發者，如果...

lk20150415 2019-08-26 13:31 評論0 收藏0
js-編譯原理與聲明提升

摘要：編譯原理在傳統編譯語言的流程中，程序中的一段源代碼在執行之前會經歷三個步驟，統稱為編譯。定義聲明是在編譯階段進行的，而賦值是在執行階段進行的。編譯原理在傳統編譯語言的流程中，程序中的一段源代碼在執行之前會經歷三個步驟，統稱為編譯。詞法分析將由字符組成的字符串分解成(對編程語言來說)有意義的代碼塊，這些代碼塊被稱為詞法單元(token)。語法分析這個過程是將詞法單元流(數組)轉...

zhongmeizhi 2019-08-26 10:12 評論0 收藏0
JavaScript深入系列15篇正式完結！

摘要：寫在前面深入系列共計篇已經正式完結，這是一個旨在幫助大家，其實也是幫助自己捋順底層知識的系列。深入系列自月日發布第一篇文章，到月日發布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。寫在前面 JavaScript 深入系列共計 15 篇已經正式完結，這是一個旨在幫助大家，其實也是幫助自己捋順 JavaScript 底層知識的系列。重點講解了如原型、作用域、執行上下文、變量對象、this、...

fxp 2019-08-20 16:50 評論0 收藏0