javascript變數宣告提升簡單介紹

所謂的變數宣告提升，也就是說變數的宣告會提前。

javascript程式碼的執行，分為兩個階段，一個是預編譯期，一個是執行期。

變數宣告的前置是在預編譯期間進行的。

看一段程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
console.log(webName);
var webName = "螞蟻部落";
console.log(webName);

變數的宣告是在預編譯期間進行的，賦值是在執行的時候進行的。

所以當第一個console.log()執行的時候，變數webName前置宣告瞭，而沒有進行賦值，所以輸出值是undefined，第二個console.log()執行的時候，變數已經賦值，所以輸出"螞蟻部落"。函式的宣告也是同樣的道理，看如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
func();
function func() {
  console.log("softwhy.com");
}

上面的程式碼之所以在函式宣告之前就可以呼叫，是因為在預編譯期間就已經函式宣告就已經完成且前置。

再來看一段程式碼:

[JavaScript] 純文字檢視 複製程式碼
func();
var func = function () {
  console.log("softwhy.com");
}

上面的函式宣告方式就沒函式前置功能，因為上面的函式宣告本質還是宣告一個變數，只不過變數值是一個函式而已。

再來看一段程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
var antzone = new Date();
function func() {
  console.log(antzone);
  if (false) {
    var antzone = "softwhy.com";
  }
}
func()

上面的程式碼中，雖然if語句內的程式碼永遠不會執行，但是還是會編譯的，所以依然有變數提升現象。

需要主要的是，變數提升是有作用域限制的，也就是變數會提升到當前作用域的頂端。

上面的程式碼等價於:

[JavaScript] 純文字檢視 複製程式碼
var antzone = new Date();
function func() {
  var antzone;
  console.log(antzone);
  if (false) {
    antzone = "softwhy.com";
  }
}
func()