釋出自Kindem的部落格，歡迎大家轉載，但是要注意註明出處。另外，該文章收納在Kindem的個人的 IT 知識整理倉庫，歡迎 Star、Fork、投稿

介紹

變數提升Hoisting是人們對JavaScript執行上下文工作方式的一種認識，並不是官方給出的改變

從字面上理解，變數提升的意思是變數和函式的宣告會在物理層移動到作用域的最前面。但是這樣理解並不準確，效果是相同的，但是實際的實現方式是JavaScript的變數和函式的宣告會在編譯階段放入記憶體

這意味著使用者在正式宣告一個函式或者變數之前就能夠使用它

函式的提升

在JavaScript中，在宣告一個函式前，我們就能夠使用它，大家應該都體驗過，像這樣:

test();

function test() {
    // do something
}

在正常的使用情況下，應該需要先宣告函式才能呼叫，但是這種方法仍然能夠執行，這是因為JavaScript自動將函式宣告事先存入了記憶體的原因，看起來就像JavaScript自動把函式宣告提升到了最前面

變數的提升

對於變數，JavaScript使用類似的方法，但是要注意一點的是，對於變數的提升，JavaScript只會將變數宣告提升，但是不會把初始化提升，如果在變數初始化之前使用，則會得到undefined

// undefined
console.log(a);
// ReferenceError: b is not defined
console.log(b);
var a = 10;
 

// undefined
console.log(num);
num = 6;
// 6
console.log(num);
num += 7;
// 13
console.log(num);
var num;

// undefined
console.log(num);
num = 1;
// 1
console.log(num);
var num = 2;
// 2
console.log(num);

這裡要注意，JavaScript的變數提升是針對var的，而let和const不存在變數提升這一特性

// ReferenceError: a is not defined
console.log(a);
let a = 10;
 

一個複雜一點的例子

var a = 100;
function fn() {
    // undefined
    console.log(a);
    var a = 200;
    // 200
    console.log(a);
}
fn();
// 100
console.log(a);
var a;
// 100
console.log(a);
// 300
var a = 300;
console.log(a);