我們寫的原始碼是無法直接被電腦或是瀏覽器閱讀的,在被電腦運行之前須經過“解譯”成電腦看得懂的代碼。
JS屬於 Interpreted Language : 直譯式語言
直譯式語言在執行之前沒有經過“編譯 (Compile)”。編譯這個動作指的是將我們寫的原始碼預先生成代碼,它的運作流程如下:

而直譯式語言則是透過”直譯器”來直接生成電腦看得懂的代碼。以JavaScript來說,錯誤會直接反映在瀏覽器的console上面。

JavaScript直譯器轉換的過程

Tokenizing:
將原始碼拆解成一個一個小單元,在這個階段,直譯器還無法判斷每個小單元各自的作用,僅把字詞給解析出來。以下列程式碼為例:
var ming = ‘小明’;在此階段,直譯器會這段程式碼拆解成:
var
ming
=
‘小明’
;但他並不知道,ming表示變數名稱,=做的是賦值而 ; 代表結尾。這些不過是一個一個符號或字詞罷了。
Esprima這個線上小工具 可以讓我們了解在程式語言在直譯各階段的過程,以剛才那一行程式碼為例:如同前面說明過的,ming 被解析為一個identifier,這裡還並不知道他是一個變數名稱。而等號和分號都被解析為punctuator標點符號而已。

Abstract Syntax Tree:
抽象結構樹會將前一階段解析出來的tokens轉換為他們原本被賦予的意義。我們可以看到在tree這個tab裡,他已經成功將這段程式碼解讀為一個結構樹:“宣告一個變數ming, 且初始值為小明”。

如果把這段程式碼改一下,把var關鍵字拿掉,我們也可以結構樹中看出來,這行程式碼做的事情變成賦值給變數ming, 而沒有做宣告的動作。

在這個階段是還沒有運行程式碼的喔,程式碼運行會在代碼生成之後。每個環境 (瀏覽器, Node.js等)的代碼生成過程不盡相同。
