提升(Hoisting)是 JavaScript 将声明移至顶部的默认行为。
JavaScript 声明会被提升
在 JavaScript 中,可以在使用变量之后对其进行声明。
换句话说,可以在声明变量之前使用它。
例子 1
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
x = 5;
elem = document.getElementById("demo");
elem.innerHTML = x;
var x;
</script>
</body>
</html>
//5
例子 2
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
var x;
x = 5;
elem = document.getElementById("demo");
elem.innerHTML = x;
</script>
</body>
</html>
//5
Hoisting 是 JavaScript 将所有声明提升到当前作用域顶部的默认行为(提升到当前脚本或当前函数的顶部)。
let 和 const 关键字
用 let
或 const
声明的变量和常量不会被提升!
JavaScript 初始化不会被提升
JavaScript 只提升声明,而非初始化。
例子 1
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
var x = 5;
var y = 7;
elem = document.getElementById("demo");
elem.innerHTML = x + " " + y;
</script>
</body>
</html>
//5 7
例子 2
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
var x = 5;
elem = document.getElementById("demo");
elem.innerHTML = "x is" + x + "y is " + y;
var y = 7;
</script>
</body>
</html>
//x is5y is undefined
最后一个例子中的 y 仍然是未定义能说得通吗?
这是因为只有声明(var y)而不是初始化(=7)被提升到顶部。
由于 hoisting,y 在其被使用前已经被声明,但是由于未对初始化进行提升,y 的值仍是未定义。
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
var x = 5;
var y;
elem = document.getElementById("demo");
elem.innerHTML = x + " " + y;
y = 7;
</script>
</body>
</html>
//5 undefined
在顶部声明您的变量!
Hoisting(对很多开发者来说)是 JavaScript 的一种未知的或被忽视的行为。
如果开发者不理解 hoisting,程序也许会包含 bug(错误)。
为了避免 bug,请始终在每个作用域的开头声明所有变量。
由于这就是 JavaScript 解释代码的方式,请保持这个好习惯。
严格模式中的 JavaScript 不允许在未被声明的情况下使用变量。