JavaScript 執行環境 & 詞彙環境

JavaScript 筆記

Jacy Chu
5 min readAug 15, 2021

📝 此篇整理 JavaScript 執行環境 & 詞彙環境

📍 JavaScript 屬於單執行緒 Single threaded & 同步執行Synchronous Execution,照順序一次執行一個指令。

語法解析器 Syntax Parsers

A program that reads your code and determines what it does and if its grammar is valid.
讀取程式碼並決定做何動作(前提:語法是正確的)
編譯器或是直譯器 Compiler or Interpreter 去做轉換的動作

詞彙環境 Lexical Environments

Where something sits physically in the code you write.
程式碼在程式中實際的所在位置,詞彙指程式碼的語法及單字。程式碼的位置很重要,會影響語法解析器運作。

執行環境 Execution Context

A wrapper to help manage the code that is running.
幫忙管理正在執行之程式。有很多個詞彙環境,此時正在執行的就是藉由執行環境控管。

Object 物件 Name/Value pair

在同一個執行環境,一段正在執行的程式碼,相同名稱只會有一個。名稱對應到的值,可以是另外一組name/value pair。

全域環境 & 全域物件 Global Environment & Global Objects

不論何時執行JavaScript程式,他都會在執行環境 Execution Context 裡面執行。基礎的執行環境及是全域環境,全域代表任何地方都可以取用。全域環境被建立時 JS engine 會自動產生 global object & this。如果使用瀏覽器(像是Google Chrome Firefox)的話,全域物件即是 window,在全域等級兩者相等,this 參照 window。
程式碼或是變數如果不在函數中,會和全域物件連結。執行環境會產生全域物件 this 還有一個外部環境,不過在初始化建立的時候,外部環境並沒有東西(null)。

執行環境

分為兩個階段:創造階段 & 執行階段

(1) 創造階段 Creation Phase

會產生 Global object, this, outer environment,設立記憶空間給變數函式即稱為提稱 hoisting。並沒有實質上搬動程式碼,只是在逐行執行程式碼之前,JavaScript 已經為變數&函數建立空間。所以當逐行執行的時候,可以找到他們。所有變數一開始都會設定成 undefined,函數則會完全被設定好在記憶體中。

🔖 補充:Undefined & Is not defined
undefinedis not defined 是不一樣的錯誤,undefined 的意思是「我不知道值是多少」,is not defined 代表「未宣告」,JavaScript 給已宣告未賦值的變數或是函數的預設值都是 undefined

(2) 執行階段 Execution Phase

執行已經寫好的程式碼。

console.log(a);    // undefined
var a = "Hello!";
console.log(a); // "Hello!"

在創造階段,var a會先設定成 undefined,在執行階段一行行執行時,一開始會印出 undefined,接著第三行才被賦值,第三行印出 "Hello"

函數呼叫 Function Invocation & 執行堆 Execution Stack

函數呼叫:執行或函數,一般使用 () 括號呼叫。

function b() {
}
function a() {
b();
}
a();

創造階段:一開始會先建立一個全域執行環境,此時 function b & function a 已經建立(尚未被執行)。
執行階段:執行到 a(),被放進執行堆。最上面的就是正在執行的東西。a 自己本身也是一個執行環境,也會經歷到創造階段與執行階段,逐行執行。其中執行到了了 b(),會停下來創造另一個 b 的執行環境。此範例 b 函式並沒有做任何事。
每個函數都會創造一個執行環境,經歷創造階段與執行階段。當 b 結束時,因為他在執行堆的最上面,結束會離開執行堆,接著是 a,最後回到下方的全域執行環境。

範圍鍊Scope Chain

「範圍」代表能夠取用這變數的地方,而「鏈」是外部環境參照的連結。要去看他的詞彙環境 Lexical Environments。
舉例:b去找a 找到了,如果沒有找的話會再往 global 找。

🔖 補充:let 在區塊中被宣告,當變數被宣告在區塊裡面,只能在裡面被取用。舉例:for loop 中的 let,創建的變數在記憶體中都不同。

範例比較

範例 1:

範例 2:

📐✏️ 📏

若有任何錯誤請在下方留言~🙏 Thanks!

--

--