創造與提升 (Creation and Hoisting)

發表於 更新於 分類於

這個章節將延續前面的執行環境進一步探討 JS 在創造執行環境時做了什麼

一段簡單的變數與函式宣告如下:

1
2
3
4
5
6
7
8
9
10
var a = 'Hellow World';
function b() {
    console.log('Called b!');
}

b();
console.log(a);

// Called b!
// Hellow World

結果可想而知會依序出現，但如果將呼叫的順序對調，會出現神奇的結果如下:

1
2
3
4
5
6
7
8
9
10
b();
console.log(a);

var a = 'Hellow World';
function b() {
    console.log('Called b!');
}

// Called b!
// undefined

原因是 JS 執行環境被分成以下兩階段創造

Creation Phase 創造階段

在這個階段以下的東西會被創造

  • Global Object

  • this

  • Outer Environment

  • Hoisting : Setup memory space for variables and functions
    在這個階段變數與函式會被定義且已經在記憶體中，函式的程式碼會被執行，但變數只會在記憶體中宣告但並不知道等號 (=) 右側所賦予的質為何，所以預設賦予他一個 ‘undefined’ 的值，而不是未宣告的 ‘not defined’

Execution Phase 執行階段

而在這個階段變數與函式都已經存在於記憶體中，接著 JS 會由上而下依序執行，直到出現等號 (=) 賦值才會出現我們期待的結果