js教程详细了解JavaScript编译原理

前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用

【相关推荐：javascript视频教程、web前端】

1.分词/词法分析

首先来说一下什么是分词吧，分词就是将由字符组成的字符串分解成对于编程语言有意义的代码块。这些代码块就被成为词法单元。如var a = 2这段代码，会被分解为下面的词法单元。具体为：var，a，=，2。
注意：分词其实就是将上面的整段代码进行一个拆分为一段一段。

2.解析/语法分析

解析就是将词法单元流转换为一个有元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为：抽象语法树。鉴于这里过长的标准词，就不做考虑了，本人直接以一种更加直观的形式展示。具体如下图：

解析：抽象语法树会有一个var的顶级节点，之后会有一个变量为a的子节点以及赋值符=的一个节点。在赋值符下又有一个为2的子节点。具体就对应了var a = 2这段代码。

3.代码生成

将抽象语法树转换为可执行代码的过程被称为代码生成。这个过程与语言，目标平台息息相关。简单来说就是有某种方法可以将var a = 2的抽象语法树转换为机器的指令。用来创建一个叫做a的变量，并将一个值存储在a中。

4.LHS和RHS查询

执行JavaScript代码主要是依赖引擎。当引擎执行var a = 2时，会通过查找变量a来判断是否已经声明。查找的过程由作用域协助。在查询的过程中，引擎会为变量a进行LHS（左查询），会为值进行右查询。简单来说就是当变量出现在赋值操作的左侧时，进行LHS查询，出现在右侧时，进行RHS查询。更准确来说就是LHS查询试图找到变量的容器本身，RHS则是为了取到他的源值。
注意：在函数中，会出现既有LHS又有RHS查询。因为在传递参数的过程中，会代码会进行隐式的赋值。

5.异常

当变量还没声明的情况下，LHS查询和RHS查询的行为是不一样的。

function foo(a){
    console.log(a+b);
    b=a;}foo(2)

注意：第一次对b进行右查询是无法找到该变量的，也就是说这是一个未声明的变量，因为在任何相关的作用域中都无法找到他。如果RHS在所嵌套的作用域中遍寻不到所需的变量，引擎就会抛出异常。

6.小测验

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

问题：找出所有的LHS查询和RHS
答案：LHS（c=…，a=2，b=…）和RHS（foo(2…，=a，a…，…b)）

【相关推荐：javascript视频教程、web前端】

以上就是详细了解JavaScript编译原理的详细内容，更多请关注zzsucai.com其它相关文章！