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

jkyin 发布于2019-08-21 11:28 / 2776人阅读

摘要：的抽象语法树中可能如下图所示代码生成将转换为可执行代码的过程被称为代码生成。如果是，编译器会忽略该声明，继续进行编译，否则它会要求在当前作用域的集合中声明一个新的变量，并命名为。

在学习 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 起到事半功倍的效果，我们的学习之路才刚刚开始，大家加油！

欢迎关注我的公众号

参考文章

《你不知道的JavaScript》

GPU云服务器云服务器 js作用域和上下文 js跨域原理分析深度学习系列编译原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86752.html

JS学习系列 04 - 提升

摘要：第二个赋值声明会被留在原地等待执行阶段。这个过程就叫作提升。还有一点，函数声明会被提升，但是函数表达式不会被提升。到目前为止，大家应该很熟悉作用域的概念了，以及根据声明的位置和方式将变量分配给作用域的相关原理了。函数作用域和块作用域的行为是一样的，可以总结为：任何声明在某个作用域内的变量，都将属于这个作用域。但是作用域同其中的变量声明出现的位置有某种微妙的关系，而这个细节就是我们这...

liuyix 2019-08-20 14:28 评论0 收藏0
WebAssembly 系列（四）WebAssembly 工作原理

摘要：但是它们其实并不是二选一的关系并不是只能用或者。正因为如此，指令有时也被称为虚拟指令。这是因为是采用基于栈的虚拟机的机制。声明模块的全局变量。。下文预告现在你已经了解了模块的工作原理，下面将会介绍为什么运行的更快。作者：Lin Clark 编译：胡子大哈翻译原文：http://huziketang.com/blog/posts/detail?postId=58c77641a6d8...

stormzhang 2019-08-20 15:05 评论0 收藏0
重读你不知道的JS (上) 第一节一章

摘要：的抽象语法树中可能会有一个叫作的顶级节点，接下来是一个叫作它的值是的子节点，以及一个叫作的子节点。值得注意的是，是非常重要的异常类型。严格模式下，未声明的和俩者行为相同，都会是。你不知道的JS(上卷)笔记你不知道的 JavaScript JavaScript 既是一门充满吸引力、简单易用的语言，又是一门具有许多复杂微妙技术的语言，即使是经验丰富的 JavaScript 开发者，如果...

lk20150415 2019-08-26 13:31 评论0 收藏0
js-编译原理与声明提升

摘要：编译原理在传统编译语言的流程中，程序中的一段源代码在执行之前会经历三个步骤，统称为编译。定义声明是在编译阶段进行的，而赋值是在执行阶段进行的。编译原理在传统编译语言的流程中，程序中的一段源代码在执行之前会经历三个步骤，统称为编译。词法分析将由字符组成的字符串分解成(对编程语言来说)有意义的代码块，这些代码块被称为词法单元(token)。语法分析这个过程是将词法单元流(数组)转...

zhongmeizhi 2019-08-26 10:12 评论0 收藏0
JavaScript深入系列15篇正式完结！

摘要：写在前面深入系列共计篇已经正式完结，这是一个旨在帮助大家，其实也是帮助自己捋顺底层知识的系列。深入系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 深入系列共计 15 篇已经正式完结，这是一个旨在帮助大家，其实也是帮助自己捋顺 JavaScript 底层知识的系列。重点讲解了如原型、作用域、执行上下文、变量对象、this、...

fxp 2019-08-20 16:50 评论0 收藏0