JavaScript 核心篇 學習筆記: Chap.6 - JS是如何運行的

Yi-Ning
Yi-Ning
Nov 2 · 3 min read

我們寫的原始碼是無法直接被電腦或是瀏覽器閱讀的,在被電腦運行之前須經過“解譯”成電腦看得懂的代碼。

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等)的代碼生成過程不盡相同。

Yi-Ning

Written by

Yi-Ning

Frontend beginner的學習筆記

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade