0

0

javascript声明提升的介绍(附示例)

不言

不言

发布时间:2019-03-22 09:39:47

|

2077人浏览过

|

来源于segmentfault

转载

本篇文章给大家带来的内容是关于javascript声明提升的介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

Javascript声明提升

在分析声明提升之前,我认为有必要知道的两点:

一、引擎查询变量的两种方式

引擎查询变量的方式可以分为LHS和RHS两种方式,通过“L”和“R”是可以大致了解意思,分别是赋值操作的左侧和右侧。 (不能光是理解为“=”的左右侧可不行,因为赋值操作的形式有多种。)

简单说下我对这两种查询方式的理解:
LHS:赋值操作的目标是谁。 (查询变量)
RHS:谁是赋值操作的源头。 (查询变量的值)

这样说可能有些难以理解,举个栗子:

function foo(a){
    //这里存在一个隐式变量分配,LHS查询变量a,并赋值2.
    //隐式a = 2;
    //左边LHS查询变量b,查询作用域中是否存在b这个变量。
    //右边RHS查询变量a的值,将a赋值给b。
    var b = a;
    //返回a,b是RHS查询变量a的值和变量b的值并使用。
    return a + b;
}
//左边LHS查询变量c,查询作用域中是否存在c这个变量。
//右边RHS引用函数foo,将2作为参数传进去。
var c = foo(2);

二、异常

关于异常要强调一点,必须在严格模式下。因为在非严格模式下,LHS查询若是在最顶层的全局作用域上找不到查询的变量,则会创建一个该名称变量返还给引擎。

立即学习Java免费学习笔记(深入)”;

ReferenceError:同作用域判别失败相关。(比如:作用域中遍寻不到所需的变量)
TypeError:作用域判别成功了,但是对结果的操作是非法或不合理的。(比如:试图对一个非函数类型的值进行函数调用,或者引用null或undefined类型的值中的属性)

举个栗子:

声讯电话整站程序
声讯电话整站程序

>声讯电话网站特点介绍:>电信级通话质量>多用户商城模式>自助发布声讯服务>自定义服务收费>傻瓜后台,人性设置>分账式声讯商业模式>自定义分成比例>详细的通话明细>清晰的账务流水明细>使用ASP.Net(c#)、三层结构开发>在线支付:网银在线接口>销售统计>竞价排名功能>温情推荐,固顶显示>UTF-8

下载
"strict"
function foo() {
    console.log(a) //undefined
    console.log(b) //ReferenceError
}
var a = 2;

声明提升

一、初步了解

编写javascript代码时,很多时候都会觉得代码会自上而下的执行。但是碰到声明提升,这种想法就会被打破。

举个栗子:

a = 2;
var a;
console.log(a);

运行结果为: 2

如果按照常理的自上而下执行,那么a执行的预期结果应当是undefined,然而为什么会是2?
这就是声明提升的结果。

二、进一步了解

当初步了解声明提升的时候,碰上下面的代码:

console.log(a);
var a = 2;

运行结果为:undefined

初步了解声明提升之后,会自然而然的认为,声明就会被提升,然而声明的时候赋值,却得不到变量的值。

其实,上面代码的运行步骤可以分解为:

var a; //声明提升
console.log(a); //打印a的值
a = 2; //对a进行赋值

原来,声明提升就是字面上的声明提升,其余的操作(如:赋值和其他逻辑)都还在原地踏步。

声明一个函数进行相应的操作,会得到函数声明提升的结果。由此可以发现:变量和函数的声明都会被提升在其他代码的前面执行。

三、逐步了解

通过几次试验可以逐步了解到,其实声明提升就是:变量和函数的声明会被提升在其他代码(当前作用域)的前面执行。

走到这里,有人就会想到,要是函数表达式,也会进行提升吗?

答案是:不会。而且,即使是具名函数表达式,在名称标识符赋值之前也是不能使用的。

举个栗子:

foo(); //TypeError
bar(); //ReferenceError
var foo = function bar(){};

代码分解为:

var foo; //变量声明提升
foo(); //foo对undefined值进行函数调用导致非法操作,故TypeError
bar(); //bar函数并没有声明,故ReferenceError
foo = function bar(){}; //对foo进行赋值

所以:函数表达式在名称标识符赋值之前是不能使用的。

注意:1、每个作用域都会进行提升操作。(所以函数内部形成的作用域也会有提升操作,提升            操作仅限当前的函数内部作用域)
2、在函数和变量提升时,函数优先提升。
3、一个普通块内部的函数声明通常会被提升到所在的作用域的顶部。

四、深入了解

在阅读《你不知道的javascript》时,学习let的过程中,会发现有说明提到:使用let进行的声明不会在作用域中进行提升。声明的代码在被运行之前是,声明并不存在。

举个栗子:

console.log(a);
let a = 2;

运行结果是:ReferenceError: Cannot access 'a' before initialization. //初始化前无法访问"a"

然后回到之前我运行的代码,将let换为var,返回的结果是undefined。

二者结合,再加上阅读我用了两个月的时间才理解let这篇文章,发现对let是否提升有了一个更新的认识。

作者把js变量分成三部分操作:创建(create)、初始化(initialize)和赋值(assign)

上面的操作之所以会有不同的响应并不是说let没有创建,而是有一个初始化的过程并没有执行。而在初始化之前使用变量,就会形成一个暂时性死区

经过var和let和function的测试可以总结到:

var的创建和初始化被提升,赋值不会被提升。

let的创建被提升,初始化和赋值不会被提升。

function的创建、初始化和赋值均会被提升。

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目!

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

10

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

59

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

84

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

38

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

13

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

17

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

157

2026.01.18

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

163

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号