JS Weird Part — Three things we need to know first!

SunBu
3 min readMar 29, 2020

--

Syntax Parser、Lexical environment、Execution Context

語法解析器 — syntax parser

A program that reads your code and determines what is dose and if its grammar is valid.

一個程式,能夠讀取程式碼並決定做何動作如果你的語法是有效的

一門語言的執行,大致經歷下面這些過程:

  • 詞法分析
  • 語法分析
  • 語義分析
  • 中間程式碼產生
  • 優化程式碼
  • 程式碼產生

在 JavaScript 中,Syntax Parser 的作用是進行詞法分析和語法分析。

詞法分析挨個字元地掃瞄程式碼,把關鍵 token 識別出來。語法分析利用詞法分析的結果建立上下文關係語法樹 Abstract Syntax Tree (AST)。一般情況下,我們不會直接和語法樹打交道,但會在進行 Uglify 程式碼壓縮、IDE 語法高亮、Babel 重編譯、關鍵字對應和作用域判斷時候涉及到。

圖片來源

簡單來說,包含直譯器、編譯器,會一個字一個字讀取並辨識程式碼是否有效,再將之轉換成為電腦可以解讀的指令,這個指令我們稱 instruction code(上圖右邊那塊)

所以當你每次執行 JavaScript 程式時, 真正執行的東西是 Syntax Parser 這個程式會轉換你的程式碼成 instruction code,它才是真正讓電腦執行的程式碼。

詞彙環境 — lexical environment

Where something sits physically in the code you write.

程式碼在程式中實際的所在位置

systax parser 在解讀並轉換程式碼時, 會考量該變數、函式的 lexical environment,而影響到它實際在記憶體中的位置或是跟其他變數、函式作用的關係。

所以談到詞彙環境(Lexical Environment)就是指開發環境中的程式位置,它被寫在哪裡?它的周圍環境是什麼?

執行環境 — execution context

A wrapper to help mange the code that is running.

一個包裹,幫助管理正在執行之程式

一個程式中會有多個 lexical environment,因此 execution context 負責協助管理正在執行的程式,如同一個 wrapper,包含我們撰寫的程式碼,以及syntax parser 執行轉換的程式碼。

執行環境包含了你寫的程式碼,正在執行的程式碼,但它包含的不只有你所寫的程式碼,記得,你寫的程式碼正在被編譯器所轉換,因此他在執行你的程式碼時,還能夠做別的事情。

JavaScript 某些特性(例如提升)就是在創造階段產生。

學習來源

[Udemy] JavaScript: Understanding the weird part

https://cheogo.github.io/learn-javascript/20170

--

--

SunBu

熱愛學習新技術和分享的年輕人,目前常用技術是 Vue、React