iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

教練我想學 JavaScript 系列 第 5

Day 5 執行環境的執行階段

我們已經知道在 JavaScript 產生執行環境時會經歷兩個階段,
第一個階段是創造階段我們已經講過了,
會幫我們創造全域物件、特殊變數 this 、外部環境,
以及將變數與函數設定到對應的記憶體空間裡,
再來看看第二個階段,
第二個階段是執行階段,
執行階段會逐行編譯、轉換你的程式碼,
轉換成電腦看的懂的東西(指令),

圖片來源:JavaScript 全攻略:克服 JS 的奇怪部分課程第 2 節講座 12 影片截圖

我們再次透過 Hoisting 的例子來看執行階段:

function b() {
    console.log('Called b!');
}

b();

console.log(a);

var a = 'Hello World!';

console.log(a);

在創造階段,我們設定了 函數b
然後 var a 被設定為 undefined

現在我們來看執行階段程式碼被執行的過程,
當第五行被執行了,呼叫 函數b函數b 被呼叫會輸出 Called b! 到 Console ,
當七行被執行了,輸出 變數a 到 Console,
因為 a 在創造階段被設為 undefined 所以會看輸出結果為 undefined
當執行到第九行,把記憶體中 a 的值設定為 Hello World! 字串,
當執行到第十一行,現在a 在記憶體中的值是 Hello World! 所以輸出 Hello World! 到 Console ,

接著打開 Chrome 來看 Console 中的結果是否跟我們預期的一樣,
Console 中的結果:

由此可知,執行環境在執行階段時,程式碼是逐行被執行的,
語法解析器逐行將程式碼,一字一行的編譯、轉換成電腦看的懂的東西,以便讓電腦執行。


上一篇
Day 4 執行環境的創造階段與 Hoisting
下一篇
Day 6 函數呼叫與執行堆及變數環境
系列文
教練我想學 JavaScript 30

尚未有邦友留言

立即登入留言