前言

几乎所有编程语言最基本的功能之一，就是能够储存变量当中的值，并且能在之后对这个值进行访问或修改。事实上，正是这种储存和访问变量的值的能力将状态带给了程序。一套设计良好的规则来存储变量，并且之后可以方便地找到这些变量。这套规则被称为作用域。
对于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 查询。

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

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

LHS和RHS的理解
LHS:赋值操作的目标 RHS:赋值操作的源头 LHS:当变量出现在赋值操作的左侧时进行LHS查询 LHS查询试图找到变量容器本身如果查找的目的是对变量进行赋值,就会使用LHS ...
深入理解JavaScript的变量作用域
在学习JavaScript的变量作用域之前,我们应当明确几点: a.JavaScript的变量作用域是基于其特有的作用域链的. b.JavaScript没有块级作用域. c.函数中声明的变量在整个函数 ...
深入理解JavaScript的变量作用域(转)
在学习JavaScript的变量作用域之前,我们应当明确几点: a.JavaScript的变量作用域是基于其特有的作用域链的. b.JavaScript没有块级作用域. c.函数中声明的变量在整个函数 ...
深入理解JavaScript的变量作用域(转载Rain Man之作)
在学习JavaScript的变量作用域之前,我们应当明确几点: JavaScript的变量作用域是基于其特有的作用域链的. JavaScript没有块级作用域. 函数中声明的变量在整个函数中都有定义. ...
JavaScript 的查询机制——LHS 与 RHS
JavaScript 引擎在查找一个变量的时候,有两种查找机制:LHS 和 RHS. RHS 的查询是简单地查找到某个变量的值,而 LHS 则是试图找到变量的容器的本身. 一个简单的例子:当我们执行 ...
JavaScript中的LHS和RHS查询
文章是本人大三期间的学习笔记,一些论断取自书籍和网上博客,碍于当时的技术水平有一些写得不够好的地方,可以在评论处理智讨论~ 问题来源于<你不知道的JavaScript(上卷)>,文章部分论 ...
[译] 漫画图解 JavaScript 引擎： let jsCartoons = ‘Awesome’;
原文地址:Understanding JavaScript's Engine with Cartoons 原文作者:Codesmith Staffing 译文出自:掘金翻译计划本文永久链接:gith ...
LHS与RHS查询(已完结)
LHS与RHS查询什么是LHS与RHS查询如果查找的目的是对变量进行赋值,那么就会使用LHS 查询:如果目的是获取变量的值,就会使用RHS 查询考虑以下代码: console.log(a); 其 ...
深入理解javascript原型和闭包（2）——函数和对象的关系
上文(理解javascript原型和作用域系列(1)--一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...
JavaScript中的作用域,闭包和上下文
深入理解JavaScript中的作用域和上下文很多语言当中都会有作用域的概念,它会给我们带来便利,偶尔也会有烦恼,只有清楚地理解和掌握了它,才能更好地为我所用,今天就带来这么一篇文章供大家参考. 介 ...

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

文章目录

前言

正文

LHS

RHS

看个例子加深一下印象

作用域嵌套

为什么要区分LHS和RHS

小结

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

最新文章

热门文章