JS编译之 LHS RHS（你不知道的JavaScript 小记一）

JS 编译之 LHS RHS

1、前言

最近和朋友聊技术的时候，聊到 LHS RHS，我居然没据说过 没据说过。。。 因而成功引发了个人好奇心。 关于两个专业术语的讨论起自对《你不知道的JavaScript》一书的阅读学习。

2、编译简述

尽管一般将JavaScript归类为“动态”或“解释执行”语言，但事实上它是一门编译语言。这个事实对你来讲可能显而易见，也可能你闻所未闻，取决于你接触过多少编程语言，具备多少经验。但与传统的编译语言不一样，它不是提早编译的，编译结果也不能在分布式系统中进行移植。

尽管如此，JavaScript引擎进行编译的步骤和传统的编译语言很是类似，在某些环节可能比预想的要复杂。

在传统编译语言的流程中，程序中的一段源代码在执行以前会经历三个步骤，统称为“编译”。

• 分词/词法分析（Tokenizing/Lexing）
• 解析/语法分析（Parsing）
• 代码生成

比起那些编译过程只有三个步骤的语言的编译器，JavaScript引擎要复杂得多。例如，在语法分析和代码生成阶段有特定的步骤来对运行性能进行优化，包括对冗余元素进行优化等。

JavaScript引擎，编译器概述

• 从头至尾负责整个JavaScript程序的编译及执行过程。
• 引擎的好朋友之一，负责语法分析及代码生成等脏活累活。

摘录来自: “你不知道的JavaScript（上卷）”

以上内容看起来有些高深，可是与下面内容并没有多少关联，只是背景，有兴趣的能够深刻研究一下。
对于下面的内容，咱们只须要知道 JS代码的执行须要JS引擎的，而JS引擎的在执行代码前会先对其进行编译（有些地方称之为预解析），引擎最终执行的是通过编译以后的代码。
LHS RHS 这两个术语就是出如今引擎对变量进行查询的时候，接下来看看在具体例子中 站在编译器和引擎的角度看看它们是怎么思考工做的，以及这个过程当中如何触发了LHS RHS.

3、具体代码的编译执行过程当中 如何触发 LHS RHS

以书中的赋值语句为示例

var a = 2;

事实上编译器会进行以下处理。

1. 遇到var a，编译器会询问做用域是否已经有一个该名称的变量存在于同一个做用域的集合中。若是是，编译器会忽略该声明，继续进行编译；不然它会要求做用域在当前做用域的集合中声明一个新的变量，并命名为a。
2. 接下来编译器会为引擎生成运行时所需的代码，这些代码被用来处理a = 2这个赋值操做。引擎运行时会首先询问做用域，在当前的做用域集合中是否存在一个叫做a的变量。若是是，引擎就会使用这个变量；若是不是，引擎会继续查找该变量。

摘录来自: 你不知道的JavaScript。

以上为书中描述，可是我的以为能够补充一些描述以下

1. 编译器在编译一段js代码时，至关于对这段代码进行预解析，为了引擎更好的进行二次解析。在预解析时，先构建好代码的上下文环境，创建做用域链，在每一个做用域中进行变量声明提高和更特别的函数声明提高。变量的声明提高会在当前做用域的集合中声明一个新的变量，如a。另外，在声明每个新的变量以前，编译器会询问做用域是否已经有一个该名称的变量存在于同一个做用域的集合中, 若有则报错。
   如

   console.log(a)
      var a = 2;

   的预解析以后，其实至关于

   var a
   console.log(a) // undefined
   a = 2;

2. 接下来编译器会为引擎生成运行时所需的代码，这些代码被用来处理a = 2这个赋值操做。引擎运行时会首先询问做用域，在当前的做用域集合中是否存在一个叫做a的变量。若是是，引擎就会使用这个变量；若是不是，引擎会沿做用域链继续查找该变量；若是查到根做用域也没有查到，会自动声明a。

ps: 关于声明提高，做用域链，若有疑惑，后续章节解释。

上述过程当中，第二步中编译器生成了代码，引擎执行它时（第3行 a = 2），会经过查找变量a来判断它是否已声明过。查找的过程由做用域进行协助，可是引擎执行怎样的查找，会影响最终的查找结果。
此时引擎会就在对变量a进行LHS查询，另一个查询的类型叫RHS。

4、LHS RHS 概念定义

我打赌你必定能猜到“L”和“R”的含义，它们分别表明左侧和右侧。
什么东西的左侧和右侧？是一个赋值操做的左侧和右侧。

换句话说，当变量出如今赋值操做的左侧时进行LHS查询，出如今右侧时进行RHS查询。

讲得更准确一点，RHS查询与简单地查找某个变量的值别无二致，而LHS查询则是试图找到变量的容器自己，从而能够对其赋值。从这个角度说，RHS并非真正意义上的“赋值操做的右侧”，更准确地说是“非左侧”。

你能够将RHS理解成retrieve his source value（取到它的源值），这意味着“获得某某的值”。

LHS和RHS的含义是“赋值操做的左侧或右侧”并不必定意味着就是“=赋值操做符的左侧或右侧”。赋值操做还有其余几种形式，所以在概念上最好将其理解为“赋值操做的目标是谁（LHS）”以及“谁是赋值操做的源头（RHS）”。

摘录来自: 你不知道的JavaScript。

以上为书中解释，以赋值操做符为标志，加上一些特殊状况的理解。可是我以为能够有其余的理解方式。

5、LHS RHS 我的理解

讲得更准确一点，RHS查询与简单地查找某个变量的值别无二致，而LHS查询则是试图找到变量的容器自己，从而能够对其赋值。

举个例子来理解就是：RHS是找到你在哪一个座位，看看你的样子拍个照；LHS一样是找到你在哪一个座位，可是一眼不看直接踹飞 换我的坐这儿。
简单来说有两个区别：1.关不关心你如今的状态 2.是否改变你的状态（不论是改变一部分，仍是彻底改变）。

因此书中这句原话

是引擎执行怎样的查找，会影响最终的查找结果。

我以为能够反过来理解，正是由于查找结果的不一样分出了两种查找类型。

左侧右侧的分类理解更可能是以 代码的形态为标准分类的。我的以为能够按查找目的为标准分类，RHS是为了读取变量的值，LHS是为了改变变量的值。

6、总结

LHS RHS就是对变量查询的两种查询类型，区别在于查询的结果，或者说查询的目的，在代码上直观体现为变量位置形态的不一样。其中涉及的编译器引擎工做过程，对于更深刻的理解掌握js颇有帮助。 其中我的理解有不合适的地方还请指正。