JavaScript Hoisting

提升（Hoisting）是 JavaScript 將聲明移至頂部的默認行為。

JavaScript 聲明會被提升

在 JavaScript 中，可以在使用變量之后對其進行聲明。

換句話說，可以在聲明變量之前使用它。

例子 1 與例子 2 的結果相同：

例子 1

x = 5; // 把 5 賦值給 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中顯示 x
var x; // 聲明 x

親自試一試

例子 2

var x; // 聲明 x
x = 5; // 把 5 賦值給 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中顯示 x

親自試一試

為了理解這一點，您必須理解術語 "hoisting"。

Hoisting 是 JavaScript 將所有聲明提升到當前作用域頂部的默認行為（提升到當前腳本或當前函數的頂部）。

let 和 const 關鍵字

用 let 或 const 聲明的變量和常量不會被提升！

請在 JS Let / Const 中閱讀更多關于 let 和 const 的內容。

JavaScript 初始化不會被提升

JavaScript 只提升聲明，而非初始化。

例子 1 與例子 2 的結果不相同：

例子 1

var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 顯示 x 和 y

親自試一試

例子 2

var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 顯示 x 和 y
var y = 7; // 初始化 y

親自試一試

最后一個例子中的 y 仍然是未定義能說得通嗎？

這是因為只有聲明（var y）而不是初始化（=7）被提升到頂部。

由于 hoisting，y 在其被使用前已經被聲明，但是由于未對初始化進行提升，y 的值仍是未定義。

例子 2 也一樣：

實例

var x = 5; // 初始化 x
var y;     // 聲明 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 顯示 x 和 y
y = 7;    // 把 7 賦值給 y

親自試一試

在頂部聲明您的變量！

Hoisting（對很多開發者來說）是 JavaScript 的一種未知的或被忽視的行為。

如果開發者不理解 hoisting，程序也許會包含 bug（錯誤）。

為了避免 bug，請始終在每個作用域的開頭聲明所有變量。

由于這就是 JavaScript 解釋代碼的方式，請保持這個好習慣。

嚴格模式中的 JavaScript 不允許在未被聲明的情況下使用變量。

請在下一章學習“use strict”。