JavaScript 如何運行的?

為了方便閱讀，以下把JavaScript稱為JS。

你是否有想過當你輸入以下程式碼的時候，JS是如何運行的?’

var name = '王小明';

你知道這時候你所編寫的JS，電腦是看不懂的嗎?

所以你必須先了解JS運行機制，這樣你才會深入了解JS。

1.轉換成可執行的程式碼

電腦只看得懂0跟1，也就是機器語言。而要我們只能寫0或1，這未免太沒效率了，也不直覺，所以就有人發明了編譯器(compiler)。

這樣我們就可以用接近人類熟悉的語言，來撰寫code。之後再交給編譯器去翻譯成機器語言，再由電腦來執行。

程式語言分成直譯式語言(Interpreted language)與編譯式語言(Compiled language)。

1-1.直譯式語言(Interpreted language)

這類型的語言多半是弱型別語言(weakly-typed)，語法簡單，很貼近日常英語文法，所以非常好學，如:JavaScript、Python、PHP、Ruby等，但缺點是慢。

1-2.編譯式語言(Compiled language)

屬於這類型的語言多半是強型別語言(strongly-typed)，有著超嚴格的審核機制。好處是執行速度飛快，如:C、C++、Java、C#等。

1-3.直譯式語言跟編譯式語言的差異?

既然兩者都是翻譯成機器語言，那為什麼還要分類呢?

因為翻譯的方式不同而造就成兩者間的差異。

直譯式：

是逐行翻譯，也是就是一行一行的翻譯，由上到下、由左到右。

編譯式：

讀取整個檔案後，在翻譯，如同專業翻譯員，會事先閱讀整段文章，在進行翻譯一樣。

1-4.直譯式跟編譯式的使用時機

兩者之間沒有誰好誰壞，要看你是在什麼樣的時機做什麼事來決定。

直譯式：

比較適合要一邊翻譯一邊執行的環境，如自動化測試、小型專案等，優點是靈活性很高，但缺點是慢。

編譯式：

有嚴謹的審核機制，容易debug，優點是快，缺點是有平台依賴性。

2.JavaScript直譯轉換過程

這個過程簡單來說就是:

語法基本單元化(Tokenizing) → 抽象結構樹AST(Abstract Syntax Tree) → 程式碼生成

這樣講你可能不知道過程，所以我們可以透過以下網站來幫助了解。

https://esprima.org/demo/parse.html#

首先我們把一開始的代碼貼上去，產生以下結果。

var name = '王小明';

View post on imgur.com

這時候電腦不知道你要做什麼，所以先拆解你的語法，這個過程就叫做語法基本單元化(Tokenizing)。

[
    {
        "type": "Keyword",
        "value": "var"
    },
    {
        "type": "Identifier",
        "value": "name"
    },
    {
        "type": "Punctuator",
        "value": "="
    },
    {
        "type": "String",
        "value": "'王小明'"
    },
    {
        "type": "Punctuator",
        "value": ";"
    }
]

之後轉成抽象結構樹，很像JSON的格式。

View post on imgur.com

type: Program
    -
    body
        -
        #1
            type: VariableDeclaration
            -
            declarations
                -
                #1
                    type: VariableDeclarator
                    -
                    id
                        type: Identifier
                        name: name
                    -
                    init
                        type: Literal
                        value: 王小明
                        raw: '王小明'
            kind: var
    sourceType: script

之後產生代碼並執行，這時候才是真正的執行，這點需要注意一下。