JS 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 定义的变量被提升到块的顶部，但没有初始化。

意思:代码块知道变量，但在声明之前不能使用它。

在声明之前使用 let 或 const 变量将导致引用错误（ReferenceError）。

从块的开始到声明，变量处于暂时性死区（ "temporal dead zone"）:

实例

这将导致引用错误（ReferenceError）:

carName = "Volvo";
alert(carname);
let carName; 亲自试一试 »

请在 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"。