何謂提升(Hoisting)？

提升(Hoisting) 其實主要是為了釐清 JavaScript 的運作所提出的觀念，在 ECMAScript 並未提出這個專有名詞，而所謂的提升，就是先將函式與變數宣告先提到程式碼最上面的動作，再接著執行程式碼

執行環境的階段

JavaScript 會在執行環境中運行程式碼，而在建立一個執行環境時可以分為兩個階段：

• 創造階段
  • 先將所有函式載入，且已可以運行
  • 再取出程式碼中的變數宣告，並在記憶體上預留變數空間，此時不會賦予變數值，系統會先給予一個初始值 undefined
• 執行階段
  • 依序執行程式碼，此時可賦予變數值

在創造環境階段優先把函式與變數的記憶體空間準備好，就叫做 提升 Hositing

變數的提升

同上面所述，在創造階段時，會將程式碼中所有變數宣告提到最前面，並在記憶體中預留空間給變數後，系統會先給予一個 undefined 的初始值，等到了執行階段，會依序執行剩下的程式碼，這時候才會賦予變數值，範例如下：

範例1：

var nickName = 'Carol';
console.log(nickName); // Carol

運行過程:

// 1. 創造階段

// 先宣告變數 nickName，在記憶體中預留空間，預設值為 undefined
var nickName;

// 2. 執行階段

// 賦予變數 nickName 值
nickName = 'Carol';

// 顯示變數 nickName 值
console.log(nickName); // Carol

範例2：

console.log(nickName);
var nickName = 'Carol';

運行過程:

// 1. 創造階段

// 先宣告變數 nickName，在記憶體中預留空間，預設值為 undefined
var nickName;

// 2. 執行階段

// 顯示變數 nickName 值
console.log(nickName); // undefined

// 賦予變數 nickName 值
nickName = 'Carol';

範例3：

因為系統找不到 變數 nickName，所以顯示錯誤訊息 Uncaught ReferenceError: nickName is not defined

console.log(nickName);
// Uncaught ReferenceError: nickName is not defined

undefined 與 is not defined 差異可在 [Day6] 'undefined' vs 'not defined' 查看更多內容

參考文獻

六角學院 - JavaScript 核心篇

MDN - 提升（Hoisting）