首页
会员中心
到顶部
到尾部
CSS教程

JavaScript 提升(Hoisting)

时间:2020/11/2 12:58:15  作者:  来源:  查看:0  评论:0
内容摘要:JavaScript 提升(Hoisting)JS 作用域JS 严格模式提升(Hoisting)是 JavaScript 将声明移至顶部的默认行为。JavaScript 声明会被提升在 JavaScript 中,可以在使用变量之后对其进行声明。换句话说,可以在声明变量之前使用它。...

JavaScript 提升(Hoisting)

提升(Hoisting)是 JavaScript 将声明移至顶部的默认行为。

JavaScript 声明会被提升

在 JavaScript 中,可以在使用变量之后对其进行声明。

换句话说,可以在声明变量之前使用它。

例子 1例子 2 的结果相同:

例子 1

x = 5; // 把 5 赋值给 x elem = document.getElementById("demo"); // 查找元素elem.innerHTML = x;                     // 在元素中显示 xvar x; // 声明 x

亲自试一试

例子 2

var x; // 声明 xx = 5; // 把 5 赋值给 xelem = document.getElementById("demo"); // 查找元素elem.innerHTML = x;                     // 在元素中显示 x

亲自试一试

为了理解这一点,您必须理解术语 "hoisting"。

Hoisting 是 JavaScript 将所有声明提升到当前作用域顶部的默认行为(提升到当前脚本或当前函数的顶部)。

let 和 const 关键字

letconst 声明的变量和常量不会被提升!

请在 JS Let / Const 中阅读更多关于 let 和 const 的内容。

JavaScript 初始化不会被提升

JavaScript 只提升声明,而非初始化。

例子 1例子 2 的结果不相同:

例子 1

var x = 5; // 初始化 xvar y = 7; // 初始化 yelem = 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; // 初始化 xvar 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”。



相关评论
广告联系QQ:45157718 点击这里给我发消息 电话:13516821613 杭州余杭东港路118号雷恩国际科技创新园  网站技术支持:黄菊华互联网工作室 浙ICP备06056032号