天天看点

JavaScript中的LHS和RHS分析

lhs 和 rhs

对于lhs和rhs,从字面意思来说是​<code>​ left hand side​</code>​和​<code>​ right hand side​</code>​即左手边和右手边,一般可以理解为赋值操作的左侧和右侧,然而不能片面的用​<code>​=​</code>​号左边还说右边去判断是​<code>​lhs​</code>​还是​<code>​rhs​</code>​通俗的理解,​

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

这两种不同的引用方式对没有声明的变量的处理方式上是不同的,而这个不同之处对于我们编写代码和分析js引擎报错是很有益处的。

当对一个变量执行​<code>​rhs​</code>​查询时,如果遍历该变量所在处的词法作用域未能找到这个变量,js引擎就会抛出​<code>​ referenceerror​</code>​错误如果成功查询到了这个变量,但是对这个变量执行不合理操作,比如对一个非数组的变量执行下标取值,js引擎就会抛出​<code>​ typeerror​</code>​错误,甚至跟你说这个操作对应的只能是数组。当对一个变量执行​

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

JavaScript中的LHS和RHS分析

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

在js语言特点

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

javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于html5的手机app,交互逻辑都是由javascript驱动的。 简单地说,javascript是一种运行在浏览器中的解释型的编程语言。

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

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

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

定义声明在编译阶段进行

赋值声明会被留在原地等待执行阶段。

变量的赋值操作会执行两个动作,首先编译器会在当前作用域中声明一个变量(如果之前没有声明过),然后在运行时引擎会在作用域中查找该变量,如果能够找到就会对它赋值。

而要讲的lhs 和 rhs就是上面说的对变量的两种查找操作,查找的过程是由作用域(词法作用域)进行协助,在编译的第二步中执行。

前面我们说到,​<code>​lhs​</code>​是赋值操作就是在往内存中存储值,而​<code>​rhs​</code>​是取值操作可以从内存中检索值,那么基于这个信息点,我们再来分析一个复杂一些的例子

问,这个例子中一共用了多少个lhs和rhs?

答,3个lhs和3个rhs

lhs

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

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

<code>​luckygirl = ... ​</code>​,中​<code>​luckygirl​</code>​在赋值操作的左边,需要为该变量在内存中进行储值,即对​<code>​luckygirl​</code>​进行​<code>​lhs​</code>​操作

rhs

- ​<code>​girlfriend = people​</code>​ ,中​<code>​people​</code>​在赋值操作的右边,​<code>​javascript​</code>​引擎需要对其进行取值操作,因此进行​<code>​rhs​</code>​查询 - ​

<code>​return girlfriend​</code>​,由于需要知道​<code>​girlfriend​</code>​的值,因此进行​<code>​rhs​</code>​查询到​<code>​girlfriend​</code>​的值 - ​

<code>​luckygirl = together('naug')​</code>​,中​<code>​together('naug')​</code>​在赋值操作的右边因此需要知道该函数执行之后的值

小结:如果查找的目的是对变量进行赋值,那么就会使用lhs查询;如果目的是获取变量的值,就会使用rhs查询。

因为在变量还没有声明(在任何作用域中都无法找到该变量)情况下,这两种查询行为是不一样的。

对于作用域的分析可以看一下这篇文章​​关于js中的作用域中的沉思​​,这里想说的是lhs和rhs都会在当前执行作用域中开始,如果有需要(也就是说他们没有找到所需的标识符),就会向上级作用域继续查找目标标识符,依次上升一次作用域,最后抵达全局作用域,最后无论找到或没找到都将到此为止

总结

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

参考资料

《你不知道的javascript(上卷)》

https://www.liaoxuefeng.com/wiki/1022910821149312

继续阅读