1. 提升(Hoisting)是JavaScript将声明移至顶部的默认行为。
2. var声明变量会被提升
2.1. 使用var声明的变量会被提升。
2.2. 实例
a = 5; // 把5赋值给a
document.write('a = ' + a + "<br />"); // 输出a = 5
var a; // 声明a
2.3. 使用var声明的变量只有声明被提升, 初始化或赋值不会被提升。
// 初始化不会被提升
document.write('b = ' + b + "<br />"); // 输出b = undefined
var b = 10;
var c;
document.write('c = ' + c + "<br />"); // 输出c = undefined
// 赋值不会被提升
c = 15;
3. 函数提升
3.1. 函数提升(Hoisting)是JavaScript将声明移动到当前作用域顶端的默认行为。
3.2. 正因如此, JavaScript函数能够在声明之前被调用:
// 声明前使用函数
document.write('sqr(20) = ' + mySqr(20) + "<br />"); // sqr(20) = 400
// 声明函数
function mySqr(x) {
return x * x;
}
3.3. 使用表达式定义的函数(匿名函数、自调用函数、箭头函数)不会被提升。
4. 例子
4.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>提升-Hoisting</title>
</head>
<body>
<script type="text/javascript">
a = 5; // 把5赋值给a
document.write('a = ' + a + "<br />"); // 输出a = 5
var a; // 声明a
// 初始化不会被提升
document.write('b = ' + b + "<br />"); // 输出b = undefined
var b = 10;
var c;
document.write('c = ' + c + "<br />"); // 输出c = undefined
// 赋值不会被提升
c = 15;
// 声明前使用函数
document.write('sqr(20) = ' + mySqr(20) + "<br />"); // sqr(20) = 400
// 声明函数
function mySqr(x) {
return x * x;
}
</script>
</body>
</html>
4.2. 效果图
5. 在顶部声明您的变量
5.1. Hoisting(对很多开发者来说)是JavaScript的一种未知的或被忽视的行为。
5.2. 如果开发者不理解hoisting, 程序也许会包含bug(错误)。
5.3. 为了避免bug, 请始终在每个作用域的开头声明所有变量, 请保持这个好习惯。
5.4. 严格模式中的JavaScript不允许在未被声明的情况下使用变量。