由LHS和RHS深入理解javascript引擎与作用域的交互

以你之姓@ 2022-10-07 13:00 153阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  LHS
     *  RHS
     *  看个例子加深一下印象
     *  作用域嵌套
     *  为什么要区分LHS和RHS
 *  小结

# 前言 #

几乎所有编程语言最基本的功能之一，就是能够储存变量当中的值，并且能在之后对这个值进行访问或修改。事实上，正是这种储存和访问变量的值的能力将状态带给了程序。一套设计良好的规则来存储变量，并且之后可以方便地找到这些变量。这套规则被称为作用域。  
       对于javascript而言，与传统编译语言不同，我们常称它为“动态解释性“语言，因为它不是提前编译，它的编译过程中引擎在对变量值进行操作的时候会与作用域之间进行沟通交互，其中有两个非常重要的过程LHS和RHS，后面我们将围绕这两个过程深入理解javascript引擎与作用域的交互

# 正文 #

编译器在编译过程中生成了代码，引擎执行它时，会通过查找变量来判断它是否已声明过。查找的过程由作用域进行协助，但是引擎执行怎样的查找，会影响最终的查找结果。而作用域查询的类型分为两种, LHS和RHS

## LHS ##

我打赌你一定能猜到“L”和“R”的含义，它们分别代表左侧和右侧。什么东西的左侧和右侧？是一个赋值操作的左侧和右侧。  
       比如`var a = 3;`的代码，引擎执行a的过程就是LHS，LHS 查询则是试图找到变量的容器本身，从而可以对其赋值。**是一个赋值的过程**

## RHS ##

与LHS对应的是RHS，你可以将 RHS 理解成 retrieve his source value（取到它的源值），这意味着“得到某某的值”。比起右边，可能非左边能更好地描述RHS，举个例子：

console.log(a)

像上面这个例子没有=，其中对 a 的引用是一个 RHS 引用，因为这里 a 并没有赋予任何值。相应地，需要查找并取得 a 的值，这样才能将值传递给console.log(…)。

## 看个例子加深一下印象 ##

光说概念，同学们可以不一定能理解透彻LHS和RHS，对于下面的例子，我们假设自己是引擎，在与作用域沟通的过程中，分别有几次LHS和RHS呢

function foo(a) { 
    	var b = a;
    	return a + b;
    }
    var c = foo( 2 );

三次LHS,四次RHS，同学们答对了嘛  
       先说一下LHS，LHS是赋值，b= 和c =我们不难找到，那么还有一处在哪里呢，还有一处隐式调用，foo(2)处其实有a = 2的隐式赋值，也属于LHS查询。  
       然后我们再分析一下RHS, RHS是取值，这个很简单，=a, a, b, foo(2)四处，并不难

## 作用域嵌套 ##

我们说过，作用域是根据名称查找变量的一套规则。实际情况中，通常需要同时顾及几个作用域。  
       当一个块或函数嵌套在另一个块或函数中时，就发生了作用域的嵌套。因此，在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（也就是全局作用域）为止。  
       遍历嵌套作用域链的规则很简单：引擎从当前的执行作用域开始查找变量，如果找不到，就向上一级继续查找。当抵达最外层的全局作用域时，无论找到还是没找到，查找过程都会停止。

## 为什么要区分LHS和RHS ##

因为在ES5中，LHS和RHS在没找到变量时的反应是不同的，如果 RHS 查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出 ReferenceError异常。值得注意的是，ReferenceError 是非常重要的异常类型。相较之下，当引擎执行 LHS 查询时，如果在顶层（全局作用域）中也无法找到目标变量，**全局作用域中就会创建一个具有该名称的变量**，并将其返还给引擎。  
       如果是严格模式或者ES6环境下，将禁止自动或隐式地创建全局变量。因此，在严格模式中 LHS 查询失败时，并不会创建并返回一个全局变量，引擎会抛出同 RHS 查询失败时类似的 ReferenceError 异常。

# 小结 #

作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。如果查找的目的是对变量进行赋值，那么就会使用 LHS 查询；如果目的是获取变量的值，就会使用 RHS 查询。

小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/3d991c833a854b90a3572261380ebabd.png