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 = '王小明';

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

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

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

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

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