javascript中的LHS与RHS

Posted 悬笔e绝

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript中的LHS与RHS相关的知识,希望对你有一定的参考价值。

原文链接:http://www.cnblogs.com/yangxiaoguai132/p/5064625.html

最近在学习javascript过程中,接触了LHS与RHS的概念,刚开始的时候有点理解不清,现在做一些梳理,方便以后进行理解。

LHS与RHS:javascript引擎的两种查找类型,含义是赋值操作的左侧与右侧。

LHS:对哪个赋值就对哪个进行LHS引用,可以理解为赋值操作的目标。

RHS:需要获取哪个变量的值,就对哪个变量的值进行RHS引用,理解为赋值操作的源头。

赋值操作有多种形式,对于以上的两种对LHS与RHS的解释,我刚刚接触,还是很混乱。

我的理解就是,一般在左边的需要被赋值,就是LHS引用,右边需要寻找到他的值,就是RHS引用。

例如:

1 function foo(a){
2 var b=a;
3 rerurn a+b;
4 }
5 var c=foo(2);

以上代码中有3个LHS与4个RHS,分析如下:

第一,var c中的c需要被赋值,在赋值操作的左侧,所以对c进行LHS引用

第二,变量c需要被赋值,他的值是foo(2),那么foo(2)的值是多少呢,需要查找foo(2)的值,在赋值操作的右侧,所以对foo(2)进行RHS引用

第三,隐含赋值操作,将2传递给function foo(a){……}函数的参数a,a在赋值操作的左侧,对a进行LHS引用

第四,var b=a;中,b需要被赋值,处在赋值操作的左侧,所以b进行的LHS,b的值将从a来,那么右侧的a的值从何而来呢?这就需要对赋值操作右侧的a进行RHS。

第五,return a+b;中,需要找到a与b的值的来源,a与b都在赋值操作的右侧,才能得到a+b的值,所以对a与b都是进行RHS引用。

为什么要区分LHS与RHS?

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

例如:

1 function foo(a){
2       console.log(a+b);
3       b=a;
4 }
5 foo(2);

以上代码对b进行RHS的时候无法找到该变量的值,则会抛出ReferenceError异常,如果是LHS找不到变量,非严格模式下,会在全局作用域中,创建一个具有该名称的变量,严格模式下,会抛出与RHS类似的异常。

例如:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
          function init(a){
               b=a+3;
               
          }
      init(2);    
      alert(b);//5
    </script>
</head>
<body>
    
</body>
</html>
复制代码

以上代码中,对b进行LHS没有找到该变量,在全局作用域中创建了一个同名的变量b,在函数init外部可以访问到b变量。

如果将代码更改为如下:

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript">
 7           function init(a){
 8                 var b=a+3;
 9                
10           }
11       init(2);    
12       alert(b);
13     </script>
14 </head>
15 <body>
16     
17 </body>
18 </html>
复制代码

在function中定义了一个局部变量b,全局作用域中定义,控制台报错如图显示,窗口中没有任何输出

将代码改成如下:

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript">
 7           function init(a){
 8                var b=a+3;
 9              
10           }
11       init(2);    
12       alert(window.b);//undefined
13     </script>
14 </head>
15 <body>
16     
17 </body>
18 </html>
复制代码

将代码改成如上所示,控制台并没有报错, 因为window.b作为window的一个属性访问,所以会返回undefined,而b作为一个变量没有定义的时候是会报错的

以上是关于javascript中的LHS与RHS的主要内容,如果未能解决你的问题,请参考以下文章

JS你不知道的JavaScript 笔记—— 作用域与闭包 - 编译原理 - LHS - RHS - 循环与闭包 - 模块 - 词法作用域 - 动态作用域

JavaScript之找LHS查询和RHS查询

你不知道的JavaScriptLHS查询和RHS查询

LHS 和 RHS----你所不知道的JavaScript系列

理解LHS查询与RHS查询

js中RHS与LHS区别