程式語言有兩種編譯的方式，「直譯式語言」和「編譯式語言(Compiled language)」，

我們的JavaScript屬於直譯式語言 (Interpreted language)。

其特性就是會一行一行的將程式碼透過直譯(Interpret)成機器碼(machine language)，

然後執行它(因為到這階段機器才看得懂它)，且多半以動態語言(dynamic language)為主。

這種語言的的執行段效能會相較編譯式來說稍微慢些。

但是它的優勢是具有 : 靈活的型別處理、動態生成、程式彈性的特性。

直譯式語言不會預先除錯，所以錯誤會直接被帶出來…

編譯式語言多半會是靜態語言(static language)，它們會事先定義的型別、型別檢查 (type check) 與擁有高效能的執行速度等特性。

直譯器的轉換過程

語法基本單元化(Tokenizing)
將詞彙一一解析出來

抽象結構樹AST(Abstract Syntax Tree)
定義原始碼的結構

代碼生成
生成機器看得懂的東西

<script>
var genius='Eason';
</script>

我們用編譯器觀察，這段程式碼會變成甚麼樣子吧。
各位會看到Tokens裡面，這段程式碼被拆解，並沒有賦予任何文字或符號意義。

[
    {
        "type": "Keyword", // 定義var 是個 關鍵字keyword
        "value": "var" //值是var
    },
    {
        "type": "Identifier",
        "value": "genius"
    },
    {
        "type": "Punctuator",
        "value": "="
    },
    {
        "type": "String",
        "value": "'Eason'"
    },
    {
        "type": "Punctuator",
        "value": ";"
    }

]

結構樹中會定義這些是甚麼意思:

補充:此時程式碼也還沒執行喔，要到運行階段才會執行。

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "genius"
          },
          "init": {
            "type": "Literal",
            "value": "Eason",
            "raw": "'Eason'"
          }
        }
      ],
      "kind": "var"
    }
  ],
  "sourceType": "script"

結構樹的樣貌

參考資料:

編譯語言 VS 直譯語言

編譯器:https://esprima.org/demo/parse.html#
連載:Eason的前端筆記

六角學院 JavaScript核心篇