JS学习系列 01 - 编译原理和作用域

在学习 javascript 的过程中，我们第一步最应该了解和掌握的就是作用域，与之相关还有程序是怎么编译的，变量是怎么查找的，js 引擎是什么，引擎和作用域的关系又是什么，这些是 javascript 这门语言最基础的地基，至于对象、函数、闭包、原型链、作用域链以及设计模式等等都是地基以上的建筑，只有地基打牢了，建筑才会稳。同样只有先把最基础的部分掌握了，之后的扩展学习才会更容易。

这一节我要说的，就是作用域和编译原理，从这里开始，我会一点点的把深入学习 javascript 的过程中总结的知识点以及遇到的问题，一篇一篇的梳理出来，如果有志同道合的朋友，可以关注我这个系列，我们一起玩转 javascript。

1. 编译原理

大家通常把 javascript 归类为一种“动态”或“解释执行”的语言，但事实上，它是一门编译语言，但和传统的编译语言不同，它不是提前编译的，编译结果也不能进行移植。

在传统编译语言中，程序在执行之前会经历三个步骤，统称为“编译”：

• 分词/词法分析

这个过程会把字符串分解成有意义的代码块，这些代码块被称为词法单元。
例如 var a = 5; 这段程序通常会被分解成下面这些词法单元： var、a、=、5、; 。空格是否会被当成词法单元取决于空格在这门语言中是否有意义。

• 解析/语法分析

这个过程是将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为“抽象语法树”（Abstract Syntax Tree，AST）。
var a = 5; 的抽象语法树中可能如下图所示：

• 代码生成

将 AST 转换为可执行代码的过程被称为代码生成。这个过程与语言、目标平台等息息相关。简单来说，就是通过某种方法可以将 var a = 5; 的 AST 转化为一组机器指令，用来创建一个叫做 a 的变量（包括分配内存等），并将一个值 5 存储在 a 中。

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

首先我们要清楚，javaScript 引擎不会有太多的时间来进行优化（相对于其它语言的编译器来说），因为与其它语言不同，javascript 的编译过程不是发生在构建之前的。

对于 javascript 来说，大部分情况下编译发生在代码执行前的几微秒（甚至更短）的时间内。在我们将要讨论的作用域背后，javascript 引擎用尽了各种办法（比如 JIT，可以延迟编译甚至重新编译）来保证性能最佳。

总结来说，任何 javascript 代码片段在执行前都要进行编译（预编译）。因此，javascript 编译器首先会对 var a = 5; 这段程序进行编译，然后做好执行它的准备，并且通常马上就会执行它。

2. 三位好友

要真正理解作用域，我们首先要知道 javascript 中有三位好朋友：

• 引擎

从头到尾负责整个 javascript 程序的编译及执行过程。

• 编译器

负责语法分析及代码生成。

• 作用域

负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。

当遇见 var a = 5; 这一段代码时，其实执行了两个步骤：

（1）var a; 编译器会询问作用域是否已经有一个该名称的变量存在于同一作用域的集合中。如果是，编译器会忽略该声明，继续进行编译，否则它会要求在当前作用域的集合中声明一个新的变量，并命名为 a 。
（2）a = 5; 编译器会为引擎生成运行时所需的代码，这些代码用来处理 a = 5; 这个赋值操作。引擎运行时会首先询问作用域，在当前作用域的集合中是否存在一个叫作 a 的变量，如果是，引擎就会使用这个变量。如果否，引擎会继续向父级作用域中查找，直到找到全局作用域，如果在全局作用域中仍没有找到 a ，那么在非严格模式下，引擎会为全局对象新建一个属性 a ，并将其赋值为5，在严格模式下，引擎会报错误 ReferenceError: a is not defined。

总结来说，变量的赋值会执行两个操作，首先编译器会在当前作用域声明一个变量（如果之前没有声明过），然后在运行时引擎会在当前作用域中查找该变量（找不到就向上一级作用域查找），如果能够找到就会对它赋值。

3. LHS 和 RHS

前面说到引擎在为变量赋值的时候会在作用域中查找变量，但是执行怎样的查找，用什么方式，会对最终的查找结果造成影响。

在 var a = 5; 这个例子中，引擎会对 a 进行 LHS 查询，当然，另外一个查找类型叫作 RHS。

对变量进行赋值所执行的查询叫 LHS。
找到并使用变量值所执行的查询叫 RHS。

举个例子：

function foo(a) {
   // 这里隐式包含了 a = 2 这个赋值，所以对 a 进行了 LHS 查询
   var b = a;
   // 这里对 a 进行了 RHS 查询，找到 a 的值，然后对 b 进行 LHS 查询，把 2 赋值给 b
   return a + b; 
   // 这里包含了对 a 和 b 进行的 RHS 查询
}

var c = foo(2);
// 这里首先对 foo 进行 RHS 查询，找到它是一个函数，然后对 c 进行 LHS 查询把 foo 赋值给 c 

所以上面的例子共包含 3 个 LHS 查询和 4 个 RHS 查询，你们都找对了吗？

4. 作用域嵌套

当一个块或函数嵌套在另一个块或函数中时，就发生了作用域嵌套。因此，在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（也就是全局作用域）为止。

举个例子：

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

var b = 2;

foo(2);    // 4

这里对 b 进行的 RHS 查询在 foo 作用域中无法找到，但可以在上一级作用域（这个例子中就是全局作用域）中找到。

总结来说，遍历嵌套作用域链的规则很简单：引擎从当前执行的作用域中开始查找变量，如果都找不到，就向上一级继续查找。当抵达最外层的全局作用域时，无论找到还是没找到，查找过程都会停止。

5. 总结

编译器、引擎和作用域是 javascript 代码执行的基础，掌握好这些会对我们深入学习 javascript 起到事半功倍的效果，我们的学习之路才刚刚开始，大家加油！

欢迎关注我的公众号

参考文章

1. 《你不知道的JavaScript》