語法解析器 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
undefined 跟 is 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!