前言
了解 JavaScript 的運作模式
我們寫的原始碼是無法直接被電腦或是瀏覽器閱讀的，在被電腦運行之前需經過 轉譯器 將相關的指令轉換成電腦能懂的指令。
JavaScript 是一種直譯式語言
什麼是直譯式語言(Interperted language)?
動態將程式碼透過直譯器逐句編譯為機器碼(直接生成電腦看得懂的代碼)，之後再執行，以JavaScript來說，錯誤訊息都是會直接反映在瀏覽器的console上面。
編譯式語言
什麼是編譯式語言(Compiled language)?
程式在撰寫的同時就 已被預先編譯 成機器碼，可以直接執行，
不用像直譯式語言還要多一道直譯程式。
兩者的差異
直譯式語言：
優點：彈性高、修改、除錯方便。
缺點：效率較低、不適合及時運用。編譯式語言：
優點：執行速度快。
缺點：開發速度、除錯速度較慢。
JavaScript直譯器轉換的過程
可以使用 Esprima 的小工具來了解何謂語法基本單位化及抽象結構樹
首先我們可以先在 Esprima 輸入以下程式碼
var ming = '小明'; 透過旁邊的 Token 分頁標籤我們可以看到程式碼都被分析成一個一個類似物件的結構，而這就是所謂的語法基本單位化(Tokenizing)
會看到 type 會有這些選項
- Keyword (關鍵字)
- Identifier (標識符，又稱為識別碼)
- Punctuator (符號)
- String、Number (型別)
在這邊要注意，在語法基本單位化時，他還不知道 ming 是一個變數名稱，他只是先將字詞解析為一個identifier。而等號和分號都被解析為punctuator標點符號而已。
抽象結構樹會將前一階段解析出來的tokens轉換為他們原本被賦予的意義。我們可以看到在tree這個tab裡，他已經成功將這段程式碼解讀為一個結構樹：宣告一個變數ming, 且初始值為小明。
透過這過程我們可以了解到 JavaScript 的直譯器，是在 Tree 的階段才開始正式的了解每一個字詞的意義，但是這邊 JavaScript 並還沒有開始真正的執行，只是了解他的字詞而已，真正的執行是在代碼生成的時候，但每一個執行環境的不同，所以執行的結果就會跟著不同。