返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中的LHS和RHS分析详情
  • 181
分享到

JavaScript中的LHS和RHS分析详情

2024-04-02 19:04:59 181人浏览 泡泡鱼
摘要

目录进一步理解编译特点分析区分 LHS 和 RHS 的重要性前言: 对于LHS和RHS,从字面意思来说是​​ Left Hand Side​​和​​ Right Hand Side​

前言:

对于LHS和RHS,从字面意思来说是​​ Left Hand Side​​和​​ Right Hand Side​​即左手边和右手边,一般可以理解为赋值操作的左侧和右侧,然而不能片面的用​​=​​号左边还说右边去判断是​​LHS​​还是​​RHS​​通俗的理解,​

​LHS​​是赋值操作即可以看做是在往内存中存储值,而​​RHS​​是取值操作,它是从内存中进行检索。事实上赋值操作还有其他几种形式,因此在概念上最好将其理解为“赋值操作的目标是谁(LHS)”以及“谁是赋值操作的源头(RHS)”。

进一步理解

这两种不同的引用方式对没有声明的变量的处理方式上是不同的,而这个不同之处对于我们编写代码和分析js引擎报错是很有益处的。 当对一个变量执行​​RHS​​查询时,如果遍历该变量所在处的词法作用域未能找到这个变量,JS引擎就会抛出​​ ReferenceError​​错误如果成功查询到了这个变量,但是对这个变量执行不合理操作,比如对一个非数组的变量执行下标取值,JS引擎就会抛出​​ TypeError​​错误,甚至跟你说这个操作对应的只能是数组。当对一个变量执行​

​LHS​​查询时,同样在遍历作用域后无法找到该变量,在非​​ES5​​的严格模式下,系统就会自动在全局作用域中创建一个同名变量,并将引用转移到该新建的全局变量中。而在​​ES5​​的严格模式下,LHS查询失败时JS引擎会抛出一个同RHS一样的​​ ReferenceError ​​错误。![​

JavaScript中的LHS和RHS分析_js引擎

因此,对LHS查询和RHS查询的仔细区分和理解无论是对JS执行过程本身的理解还是分析错误都是有所好处的。

在JS语言特点

javascript在类型上通常会被归类为“动态”或“解释执行”语言,但事实上它是一门编译语言。

JavaScript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱动的。

简单地说,JavaScript是一种运行在浏览器中的解释型的编程语言

不过这种语言与传统的编译语言还是有点不同,它不是提前编译的,编译结果也不能在分布式系统上进行移植,做过前端项目部署的同学,也会发现,我们将项目编译完成之后是个​​dist​​文件,之后将这整个文件直接放在WEB服务器上面,如NginxTomcat等,这个是个很纯粹的单机部署。

编译特点

比如说,执行一个赋值语句,我们的JavaScript引擎要做多少事呢?

var girlfriend = 'naug'

事实上做了两步,JavaScript 会将其看成两句声明:​​var girlfriend;​​和​​girlfriend = 'naug';​

  • 定义声明在编译阶段进行
  • 赋值声明会被留在原地等待执行阶段。

分析

变量的赋值操作会执行两个动作,首先编译器会在当前作用域中声明一个变量(如果之前没有声明过),然后在运行时引擎会在作用域中查找该变量,如果能够找到就会对它赋值。 而要讲的LHS 和 RHS就是上面说的对变量的两种查找操作,查找的过程是由作用域(词法作用域)进行协助,在编译的第二步中执行。 前面我们说到,​​LHS​​是赋值操作就是在往内存中存储值,而​​RHS​​是取值操作可以从内存中检索值,那么基于这个信息点,我们再来分析一个复杂一些的例子

function together(people) {
var girlFriend = people;
return girlFriend
}


var luckyGirl = together('naug');

问,这个例子中一共用了多少个LHS和RHS? 答,3个LHS和3个RHS

  • LHS

- 函数里面隐藏的​​people = 'naug'​​(隐式变量分配),当调用​​together('naug')​​时,需要将实参​​naug​​赋值给形参​​people​​,所以对​​people​​需要进行​​LHS​​操作 - 对于​

​girlFriend = people​​ ,中,girlFriend在赋值操作的左边,即将该变量往该作用域空间所在内存区间储值,也就是进行LHS操作 - ​

​luckyGirl = ... ​​,中​​luckyGirl​​在赋值操作的左边,需要为该变量在内存中进行储值,即对​​luckyGirl​​进行​​LHS​​操作

  • RHS

- ​​girlFriend = people​​ ,中​​people​​在赋值操作的右边,​​javascript​​引擎需要对其进行取值操作,因此进行​​RHS​​查询 - ​

​return girlFriend​​,由于需要知道​​girlfriend​​的值,因此进行​​RHS​​查询到​​girlfriend​​的值 - ​

​luckyGirl = together('naug')​​,中​​together('naug')​​在赋值操作的右边因此需要知道该函数执行之后的值 小结:如果查找的目的是对变量进行赋值,那么就会使用LHS查询;如果目的是获取变量的值,就会使用RHS查询。

区分 LHS 和 RHS 的重要性

因为在变量还没有声明(在任何作用域中都无法找到该变量)情况下,这两种查询行为是不一样的。 对于作用域的分析可以看一下这篇文章​ ​关于JS中的作用域​​,这里想说的是LHS和RHS都会在当前执行作用域中开始,如果有需要(也就是说他们没有找到所需的标识符),就会向上级作用域继续查找目标标识符,依次上升一次作用域,最后抵达全局作用域,最后无论找到或没找到都将到此为止

总结:

不成功的RHS引用会导致抛出​​ReferenceError​​异常。不成功的LHS引用会导致自动隐式地创建一个全局变量(非严格模式下),该变量使用LHS引用的目标作为标识符,或者抛出​​ReferenceError​​异常(严格模式下)。

到此这篇关于JavaScript中的LHS和RHS分析详情的文章就介绍到这了,更多相关JavaScript中的LHS和RHS内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript中的LHS和RHS分析详情

本文链接: https://www.lsjlt.com/news/145126.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中的LHS和RHS分析详情
    目录进一步理解编译特点分析区分 LHS 和 RHS 的重要性前言: 对于LHS和RHS,从字面意思来说是​​ Left Hand Side​​和​​ Right Hand Side​...
    99+
    2024-04-02
  • JavaScript中查询机制LHS和RHS的示例分析
    这篇文章主要介绍了JavaScript中查询机制LHS和RHS的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。JavaScript ...
    99+
    2024-04-02
  • JavaScript中的LHS和RHS怎么用
    本文小编为大家详细介绍“JavaScript中的LHS和RHS怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript中的LHS和RHS怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。前言:...
    99+
    2023-06-29
  • JavaScript中栈和队列应用详情
    目录什么是栈和队列什么时候用到栈目录的计算什么是栈和队列 栈如果用数组模拟的话是类似于一个U形桶状堆栈空间,地下是封口的,只能从顶部一个地方进出,它的进出都是有顺序的,看下图:如果是...
    99+
    2024-04-02
  • Javascript浅析执行机制的详情
    目录变量提升JavaScript 代码的执行流程编译阶段执行阶段代码中出现相同的变量或者函数怎么办变量提升 要理解变量提升,我们先从一小段代码入手: showName...
    99+
    2022-11-13
    Javascript 执行机制 Javascript 运行机制
  • JavaScript中的宏任务和微任务详情
    目录1、微任务有哪些2、宏任务有哪些3、案例3.1 结论4、代码案例4.1 代码分析4.2 结论和运用的场景1、微任务有哪些 Promise await和async 2、宏任务有哪些...
    99+
    2024-04-02
  • JavaScript中async和await的使用及队列详情
    目录一、宏任务和微任务的队列入门知识,可以参考之前的文章:1.async && await概念2.async && await基本使用二、async&...
    99+
    2024-04-02
  • Javascript中 “&” 和 “|” 的示例分析
    这篇文章主要为大家展示了“Javascript中 “&” 和 “|” 的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Javascript中 “...
    99+
    2024-04-02
  • JavaScript和TypeScript中class的示例分析
    这篇文章主要介绍了JavaScript和TypeScript中class的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1、静态成员...
    99+
    2024-04-02
  • JavaScript中Set集合的方法详情
    目录Set集合概述如何创建并使用 SetAdd()Clear()Delete()Entries()Has()ForEach()Keys() 与 values()SizeSe...
    99+
    2024-04-02
  • JavaScript中DOM和BOM原理详析
    目录前言DOM为什么要创建DOM节点或者画一个类似于这样的结构图?DOM的家世1.DOM为啥这么有必要?2.DOM的迭代,有啥区别?3.注意注意!!DOM的好兄弟BOM!小结前言 本...
    99+
    2024-04-02
  • C#中的Explicit和Implicit详情
    目录 一、Implicit和Explicit1、Implicit2、、Explicit先上一段奇怪的代码: if (dto.Payment == null) conti...
    99+
    2024-04-02
  • Python中的 enumerate和zip详情
    目录前言1. enumerate 方法2. zip 方法总结前言 我们在上一期学习了关于Python 迭代器Iterator详情相关的概念,满足迭代器需要符合两个条件 实现...
    99+
    2024-04-02
  • Vue3中的Refs和Ref详情
    小编同样和大家分享关于Vue3中的数据相应的问题,下面我们来例举一个这样的例子 Vue.createApp({ template: `<div>{{ name...
    99+
    2024-04-02
  • JavaScript中数组求和的示例分析
    这篇文章给大家分享的是有关JavaScript中数组求和的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript数组求和的方法:1、利用递归,让数组元素不断相...
    99+
    2024-04-02
  • javascript中className和a href的示例分析
    这篇文章主要为大家展示了“javascript中className和a href的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript中c...
    99+
    2024-04-02
  • Javascript中Microtask和Macrotask实例分析
    这篇文章主要讲解了“Javascript中Microtask和Macrotask实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Javascript中Microtask和Macrota...
    99+
    2023-06-29
  • MySQL之InnoDB中锁的情况分析
    这篇文章主要讲解了“MySQL之InnoDB中锁的情况分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“MySQL之InnoDB中锁的情况分析”吧!mysq...
    99+
    2024-04-02
  • Java 中的类和对象详情
    目录1、类的定义2、类中变量的类型3、构造方法4、重载方法5、继承5.1 重写方法6、创建对象7、访问实例变量和方法8、比较对象8.1 使用 == 比较对象8.2 使用 equals...
    99+
    2024-04-02
  • JavaScript中map、reduce、filter和find的示例分析
    这篇文章将为大家详细讲解有关JavaScript中map、reduce、filter和find的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。循环在 JavaSc...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作