JavaScript中的LHS和RHS分析详情


Posted in Javascript onApril 06, 2022

前言:

对于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分析详情

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

在JS语言特点

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

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

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

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

编译特点

比如说,执行一个赋值语句,我们的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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 #Vue.js
vue3使用vuedraggable实现拖拽功能
vue整合百度地图显示指定地点信息
vue中使用mockjs配置和使用方式
VUE使用draggable实现组件拖拽
Apr 06 #Vue.js
教你部署vue项目到docker
利用uni-app生成微信小程序的踩坑记录
Apr 05 #Javascript
You might like
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php实现Mysql简易操作类
2015/10/11 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
JS重要知识点小结
2011/11/06 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
浅谈node的事件机制
2017/10/09 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Python面向对象之Web静态服务器
2019/09/03 Python
python返回数组的索引实例
2019/11/28 Python
详解Python中的分支和循环结构
2020/02/11 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
机械工程系毕业生求职信
2013/09/27 职场文书
一句话工作感言
2014/03/01 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
公务员考察材料范文
2014/12/23 职场文书
个人简历求职信范文
2015/03/20 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js