JavaScript Hoisting
JavaScript Hoisting
提升（Hoisting）是 JavaScript 将声明移至顶部的默认行为。
JavaScript 声明会被提升
在 JavaScript 中，可以在使用变量之后对其进行声明。
换句话说，可以在声明变量之前使用它。
例子 1 与例子 2 的结果相同：
例子 1
x = 5; // 把 5 赋值给 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
var x; // 声明 x
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
x = 5; // 把 5 赋值给 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在这个元素中显示 x
var x; // Declare x
</script>
</body>
</html>
运行结果：
5
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 2
var x; // 声明 x
x = 5; // 把 5 赋值给 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x; // 声明 x
x = 5; // 把 5 赋值给 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在这个元素中显示 x
</script>
</body>
</html>
运行结果：
5
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
为了理解这一点，您必须理解术语 "hoisting"。
Hoisting 是 JavaScript 将所有声明提升到当前作用域顶部的默认行为（提升到当前脚本或当前函数的顶部）。
JavaScript 初始化不会被提升
JavaScript 只提升声明，而非初始化。
例子 1 与例子 2 的结果不相同：
例子 1
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
</script>
</body>
</html>
运行结果：
5 7
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 2
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
var y = 7; // 初始化 y
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = "x is " + x + " and y is " + y; // 显示 x 和 y
var y = 7; // Initialize y
</script>
</body>
</html>
运行结果：
x is 5 and y is undefined
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
最后一个例子中的 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
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 5; // 初始化 x
var y; // 声明 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
y = 7; // Assign 7 to y
</script>
</body>
</html>
运行结果：
5 undefined
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在顶部声明您的变量！
Hoisting（对很多开发者来说）是 JavaScript 的一种未知的或被忽视的行为。
如果开发者不理解 hoisting，程序也许会包含 bug（错误）。
为了避免 bug，请始终在每个作用域的开头声明所有变量。
由于这就是 JavaScript 解释代码的方式，请保持这个好习惯。
严格模式中的 JavaScript 不允许在未被声明的情况下使用变量。
请在下一章学习“use strict”。
