Tony

Hoisting是指什麼呢?

一般來說程式語言都是逐行執行的，所以正常都應該先宣告變數或函式才可以使用。
但寫過js的人都會發現有件神奇的事，我們可以先執行函式或變數，然後才進行宣告。
一般的解釋是js會執行類似"提升"的動作，自動將宣告或賦值的步驟在呼叫的時候執行。
但其實Hoisting這個字多少要負些責任讓大家誤會大了。
Hoisting中文叫做提升，我們先把中文的名字忘一邊。
舉例來說我們熟知的使用方式應該是

var a = 'Hello World!';

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

b();
console.log(a);

結果

Called b!
Hello World!

到這裡沒有太大的問題
那如果按照Hoisting的說法，下面的程式執行應該會產出什麼呢?

b();
console.log(a);

var a = 'Hello World!';

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

答案是

Called b!
undefined

照Hoisting說法應該都會自動"提升"，怎麼會找不到值呢?

原來這跟js如何初始執行環境有關
js在初始的context第一個步驟，就配置給函式還有變數一個記憶體空間。函式在配置時就會完整放在記憶體空間裡，而變數就只是宣告但尚未賦值。
所以回頭來看，用上面的話來解釋的話，在js初始階段，程式碼應該會被解讀成…

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

b();
console.log(a);

a = 'Hello World!';

來看看學到的Hoisting定義

Setup Memory Space for Variable and Functions called Hoisting

因為js在初始時，會先建立所有變數與函數的記憶體空間，接下來才逐步執行。
所以才會發生function可以執行，a尚未賦值值只有初始值undefined。

簡單結論

• 變數必須宣告在文件的最上方
• 記得沒事乖乖按原本的方式
• 不要濫用Hoisting的特性免得debug會想哭