一般我們會先宣告完函數後才呼叫函數,
也會在宣告完變數與賦值後才透過 console.log 來查看變數內容,

也就是像以下這段程式碼:

var text = "我是一個字串型別的變數";

function eatRice() {
  console.log('吃飯');
}

eatRice();

console.log(text);

在 Chrome 開發者工具的 console 結果如下:

現在將程式碼改寫為以下:

console.log(text);

eatRice();

var text = "我是一個字串型別的變數";

function eatRice() {
  console.log('吃飯');
}

在 Chrome 開發者工具的 console 結果如下:

會看到將變數 text 輸出結果後出現 undefined, 而不是出現錯誤,
而且呼叫吃飯的 function 也能成功執行 function 內的程式碼,
為什麼會這樣呢?

原因是全域執行脈絡與其他執行脈絡產生時會經歷兩個階段,
第一個階段是創造階段,
當全域執行脈絡處於創造階段時 JavaScript 引擎除了創造全域物件、this 與外部環境之外,還會替每個變數與函數設置到各自的記憶體空間中:

每個變數與 function 之間都會有各自的記憶體空間.

在執行脈絡的創造階段 JavaScript 引擎會將整個宣告的 function 與 function 中的完整程式儲存到記憶體空間中,

要注意的是在執行脈絡的創造階段時,
JavaScript 引擎只會替變數在記憶體空間設置預設值 undefined,

接著在執行脈絡的第二階段(執行階段)時會逐行執行程式碼,

當開始執行第一行輸出變數 text 的程式碼時,
前面說過在執行脈絡的創造階段時 JavaScript 引擎只會替變數在記憶體空間設置預設值 undefined,
這也就是透過 chrome 開發者工具的 console 中輸出變數 text 的值時會得到 undefined 的原因,

要避免自己手動將變數的值設置為 undefined,
這樣可以在除錯時知道這是 JavaScript 引擎替變數設置的預設值,
也代表此變數從未賦值過的意思,
除錯起來會比較容易.