JS變數提升

1、概念

在正常的程式設計過程中，我們一般會把變數宣告放在作用域頂部。

但在JS中，函式及變數的宣告可以不在作用域頂部宣告，因為它們最終都將被提升到作用域的最頂部。

2、應用

JS中，變數與函式可以在使用後宣告。

如

console.log(x);
var x;

上面程式碼輸出結果為undefined。

但是對於其他語言來說，就要嚴格遵循變數的先定義、後使用。

3、變數初始化值不會提升

console.log(x);
var x = 5;

此時，我們很容易誤會輸出的值為5。但是實際上輸出的值仍為undefined。

這是因為初始化並不會跟隨變數提升。此時這個程式碼的結構就相當於：

var x;
console.log(x);
x = 5;

此時我們就很好理解為什麼會輸出undefined了。

4、函式的變數提升

函式定義有兩種方法：

var power = function(n){
	return n * n * n;
}
function power(n){
  return n * n;
}
console.log(power(3));

• 第一種方法定義的函式不會變數提升，因為它是一個變數初始化。

• 第二種方法定義的函式會整體提升。

那麼此時函式power的效果應該是什麼？

此時輸出結果，答案是27。編譯後結構應該是

var power;
function power(n){
  return n * n;
}
//-------上方為被提升部分---------
function power = function(n){
	return n * n * n;
}
console.log(power(3));
 

可以看出，函式後來又進行了一次賦值，所以最終答案是27。

可得結論：

如果一個函式被定義了多次，那麼用var方法定義的函式優先順序一定高於直接定義的函式

5、函式變數提升容易陷入的誤區：

function power(n){
  return n * n;
}
function power(n){
  return n * n * n;
}
console.log(power(3));

可能會有人認為，後寫的函式，後進行變數提升，而變數提升會把函式放到最頂部，那麼最終變數提升後應該是

function power(n){
  return n * n * n;
}
function power(n){
  return n * n;
}
//------上方為變數提升區-----
console.log(power(3));
 

那麼根據後寫覆蓋先寫的原則，結果應該是9。

但是實際上提升後的結構應該是

function power(n){
  return n * n;
}
function power(n){
  return n * n * n;
}
//------上方為變數提升區-----
console.log(power(3));

那麼對變數提升應該理解為：把程式碼中所有的變數、函式定義部分，按順序拿出來，然後放到作用域頂部。

它們是保持原本的順序整體拿出，整體放入。

而不是看到一個，拿出一個，放到頂部一個。

新人淺見，敬請指摘