跳至主要内容

JavaScript Hoisting

· 閱讀時間約 2 分鐘
Ivan Tsai
Ivan Tsai
Backend engineer

在 JavaScript 中，會把變數定義的部分移到最前面執行，在 W3C 中提到:

Hoisting is JavaScript's default behavior of moving declarations to the top.

這個行為稱為 Hoisting (提升)

這項特色讓底下這段程式碼可以順利地執行 (在嚴謹模式下會編譯錯誤)

x = 3;
var x;
console.log(x);
// 3

若使用 let 來宣告，則能避免重複宣告和提前使用的情形發生

var value = 2;

test();

function test() {
  console.log(value);
  var value = 3;
}

上面這段程式會輸出 undefined ，因為宣告的部分會被提前到當前 Scope 的最前面，可以想像成這樣

var value = 2;

test();

function test() {
  var value;
  console.log(value);
  value = 3;
}

Functions 宣告​

在宣告 function 的時候，會建議使用 function declaration form 來取代 function expressions，stackoverflow，也是因為 hoising 的原因。

sum(1, 1); // <- Error
var sum = function (x, y) {
  return x + y;
};

上面這段程式宣告部分會被提前，但到第 2 行才會被定義，所以第 1 行是沒有辦法使用的，改成下面這樣 function declaration 會整個被提前，所以在同一個 Scope 中任何地方呼叫都沒有問題

sum(1, 1); // 2
function sum(x, y) {
  return x + y;
}

但若是在不同 scope 結果就不同了，原理和上面一樣，宣告部分只會被提升到同一個 Scope 的最頂端

console.log(sum(1, 1)); //Error
if (true) {
  function sum(x, y) {
    return x + y;
  }
}

參考資料​