電腦無法直接讀懂 JavaScript

撰寫好的 JavaScript 的程式碼無法被電腦直接讀懂,
需要透過像是 Google 的 V8 引擎來將我們寫的 JavaScript 程式碼翻譯成電腦看得懂的機器碼,
不同瀏覽器會使用不同的 JavaScript 語法解析引擎(中介程式),
也有人把這個中介程式稱作直譯器.

執行脈絡(Execution context)

當我們在 Chrome 瀏覽器中開啟一個頁面時 V8 引擎會替我們產生一個全域執行脈絡,
而這個全域執行脈絡裡面由全域物件 window 、特殊變數 this、外部環境、以及你寫的程式碼組成,

可以看到在 Chrome 瀏覽器的開發者工具來查看全域執行脈絡裡的全域物件 window 與特殊變數 this ,
在全域執行脈絡中特殊變數 this 等於全域物件 window.

執行堆疊(Execution stack)

JavaScript 是一門單執行緒與同步的程式語言,一次只能處裡一件事情,並且逐行執行(同步),

以一段程式碼來說明執行堆疊:

function b() {
  c();
  var d;
}

function c() {
  var e;
}

b();

var a = 1;

當程式碼執行時會先替這段程式碼產生一個全域執行脈絡,
並將這個全域執行脈絡放到執行堆疊裡:

當呼叫 function b 時,
會暫停執行全域執行脈絡的程式碼,並替 function b 創造一個執行脈絡,
function b 的執行脈絡會被放進執行堆疊中來執行:

在執行堆疊中最上面的執行脈絡就是正在執行的程式碼,

在執行 function b 中的程式碼時,
馬上呼叫了 function c,
此時會暫停執行 function b 的執行脈絡中的程式碼,
function c 的執行脈絡也被放執行堆疊中,
疊在 function b 的執行脈絡上面與開始執行:

在執行堆疊中最上面的執行脈絡就是正在執行的程式碼,

當執行完 function c 剩餘的程式碼後,
function c 的執行脈絡會從執行堆疊最上方被拿出來,
此時在執行堆疊中最上方的 function b 的執行脈絡繼續執行剩餘的程式碼:

接著執行完 function b 剩餘的程式碼後 ,
function b 的執行脈絡會從執行堆疊最上方被拿出來,
此時在執行堆疊中最一開始被加入的全域執行脈絡繼續執行剩餘的程式碼:

當全域執行脈絡中的剩餘程式碼執行完畢後,執行堆疊將會被清空:

這就是 JavaScript 執行程式碼的過程.

至於事件非同步的部分之後會再補充說明.

參考資料:
JavaScript 全攻略：克服 JS 的奇怪部分-章節2