【JS】992- JavaScript 常见 AST 梳理

拼搏现实的明天。 2022-10-07 15:52 152阅读 0赞

这是掘金小册《babel 插件通关秘籍》的第三节（试读章节）。

babel 编译的第一步是把源码 parse 成抽象语法树 AST （Abstract Syntax Tree），后续对这个 AST 进行转换。（之所以叫抽象语法树是因为省略掉了源码中的分隔符、注释等内容）

AST 也是有标准的，JS parser 的 AST 大多是 estree 标准，从 SpiderMonkey 的 AST 标准扩展而来。babel 的整个编译流程都是围绕 AST 来的，这一节我们来学一下 AST。

熟悉了 AST，也就是知道转译器和 JS 引擎是怎么理解代码的，对深入掌握 Javascript 也有很大的好处。

## 常见的 AST 节点 ##

AST 是对源码的抽象，字面量、标识符、表达式、语句、模块语法、class 语法 都有各自的 AST。我们分别来了解一下：

### Literal ###

Literal 是字面量的意思，比如 `let name = 'guang'`中，`'guang'`就是一个字符串字面量 StringLiteral，相应的还有 数字字面量 NumericLiteral，布尔字面量 BooleanLiteral，字符串字面量 StringLiteral，正则表达式字面量 RegExpLiteral 等。

![c8a62a838d6796eca16f67f71bdfa0bd.png][]

代码中的字面量很多，babel 就是通过 xxLiteral 来抽象这部分内容的。

### Identifier ###

Identifer 是标识符的意思，变量名、属性名、参数名等各种声明和引用的名字，都是Identifer。我们知道，JS 中的标识符只能包含字母或数字或下划线（“\_”）或美元符号（“$”），且不能以数字开头。这是 Identifier 的词法特点。

来尝试分析一下，下面这一段代码里面有多少 Identifier 呢？

const name = 'guang';
    
    function say(name) {
      console.log(name);
    }
    
    const obj = {
      name: 'guang'
    }

答案是这些

![128e5beaab2925ffbd950de05960da7e.png][]

Identifier 是变量和变量的引用，代码中也是随处可见。

### Statement ###

statement 是语句，它是可以独立执行的单位，比如 break，continue，debugger，return 或者 if 语句、while 语句、for 语句，还有声明语句，表达式语句等。我们写的每一条可以独立执行的代码，都是语句。

语句末尾一般会加一个分号分隔，或者用换行分隔。

下面这些我们经常写的代码，每一行都是一个 Statement：

break;
    continue;
    return;
    debugger;
    throw Error();
    {}
    try {} catch(e) {} finally{}
    for (let key in obj) {}
    for (let i = 0;i < 10;i ++) {}
    while (true) {}
    do {} while (true)
    switch (v){case 1: break;default:;}
    label: console.log();
    with (a){}

他们对应的 AST 节点如图所示

![b8a35163206391b29eb80193f0c1d804.png][]

语句是代码执行的最小单位，可以说，代码是由语句（Statement）构成的。

### Declaration ###

声明语句是一种特殊的语句，它执行的逻辑是在作用域内声明一个变量、函数、class、import、export 等。

比如下面这些声明语句：

const a = 1;
    function b(){}
    class C {}
    
    import d from 'e';
    
    export default e = 1;
    export {e};
    export * from 'e';

他们对应的 AST 节点如图：

![778c0fc5bf6aac495fdbc5a8665fa945.png][]

声明语句用于定义变量，变量声明也是代码中一个基础的部分。

### Expression ###

expression 是表达式，特点是执行完以后有返回值，这是和语句 (statement) 的区别。

下面是一些常见的表达式

[1,2,3]
    a = 1
    1 + 2;
    -1;
    function(){};
    () => {};
    class{};
    a;
    this;
    super;
    a::b;

它们对应的AST如图：

![c24d3d9ae6d6899abba499f1e8486405.png][]

细心的同学可能会问 identifier 和 super 怎么也是表达式呢？

其实有的节点可能会是多种类型，identifier、super 有返回值，符合表达式的特点，所以也是 expression。

我们判断 AST 节点是不是某种类型要看它是不是符合该种类型的特点，比如语句的特点是能够单独执行，表达式的特点是有返回值。

有的表达式可以单独执行，符合语句的特点，所以也是语句，比如赋值表达式、数组表达式等，但有的表达式不能单独执行，需要和其他类型的节点组合在一起构成语句。比如匿名函数表达式和匿名 class 表达式单独执行会报错

function(){};
    class{}

需要和其他部分一起构成一条语句，比如组成赋值语句

a = function() {}
    b = class{}

表达式语句解析成 AST 的时候会包裹一层 ExpressionStatement 节点，代表这个表达式是被当成语句执行的。

![361301770e22eef3f3c26bec8fe4a304.png][]

小结：表达式的特点是有返回值，有的表达式可以独立作为语句执行，会包裹一层 ExpressionStatement。

### Class ###

class 的语法比较特殊，有专门的 AST 节点来表示。

整个 class 的内容是 ClassBody，属性是 ClassProperty，方法是ClassMethod（通过 kind 属性来区分是 constructor 还是 method）。

比如下面的代码

class Guang extends Person{
        name = 'guang';
        constructor() {}
        eat() {}
    }

对应的AST是这样的

![722a6a7aba56a53d29de87d23fc385e8.png][]

class 是 es next 的语法，babel 中有专门的 AST 来表示它的内容。

### Modules ###

es module 是语法级别的模块规范，所以也有专门的 AST 节点。

#### import ####

import 有 3 种语法：

named import：

import {c, d} from 'c';

default import：

import a from 'a';

namespaced import:

import * as b from 'b';

这 3 种语法都对应 ImportDeclaration 节点，但是 specifiers 属性不同，分别对应 ImportSpicifier、ImportDefaultSpecifier、ImportNamespaceSpcifier。

![82af219a3de02864edc08e4f89016f19.png][]

图中黄框标出的是 specifier 部分。可以直观的看出整体结构相同，只是specifier 部分不同，所以 import 语法的 AST 的结构是ImportDeclaration 包含着各种 import specifier。

#### export ####

export 也有3种语法：

named export：

export { b, d};

default export：

export default a;

all export：

export * from 'c';

分别对应 ExportNamedDeclaration、ExportDefaultDeclaration、ExportAllDeclaration 的节点

其中 ExportNamedDeclaration 才有 specifiers 属性，其余两种都没有这部分（也比较好理解，export 不像 import 那样结构类似，这三种 export 语法结构是不一样的，所以不是都包含 specifier）。

比如这三种 export

export { b, d};
    export default a;
    export * from 'c';

对应的 AST 节点为

![d57f9d761f41f60d81f4681ec0f556e2.png][]

import 和 export 是语法级别的模块化实现，也是经常会操作的 AST。

### Program & Directive ###

program 是代表整个程序的节点，它有 body 属性代表程序体，存放 statement 数组，就是具体执行的语句的集合。还有 directives 属性，存放Directive 节点，比如`"use strict"` 这种指令会使用 Directive 节点表示。

![2db5825e50f422331c8a1ccb83f04b8e.png][]

Program 是包裹具体执行语句的节点，而 Directive 则是代码中的指令部分。

### File & Comment ###

babel 的 AST 最外层节点是 File，它有 program、comments、tokens 等属性，分别存放 Program 程序体、注释、token 等，是最外层节点。

注释分为块注释和行内注释，对应 CommentBlock 和 CommentLine 节点。

![17de28113f2d24056ab479a70d4ec7b8.png][]

上面 6 种就是常见的一些 AST 节点类型，babel 就是通过这些节点来抽象源码中不同的部分。

## AST 可视化查看工具 ##

当然，我们并不需要记什么内容对应什么 AST 节点，可以通过 axtexplorer.net 这个网站来直观的查看。

![d1db01f8078ffdb18a815687d8717bd1.png][]

这个网站可以查看代码 parse 以后的结果，但是如果想查看全部的 AST 可以在babel parser 仓库里的 AST 文档里查，或者直接去看 @babel/types 的 typescript 类型定义。

## AST 的公共属性 ##

每种 AST 都有自己的属性，但是它们也有一些公共属性：

*  `type`：AST 节点的类型
 *  `start、end、loc`：start 和 end 代表该节点对应的源码字符串的开始和结束下标，不区分行列。而 loc 属性是一个对象，有 line 和 column 属性分别记录开始和结束行列号。
 *  `leadingComments、innerComments、trailingComments`：表示开始的注释、中间的注释、结尾的注释，因为每个 AST 节点中都可能存在注释，而且可能在开始、中间、结束这三种位置，通过这三个属性来记录和 Comment 的关联。
 *  `extra`：记录一些额外的信息，用于处理一些特殊情况。

## 总结 ##

这一节我们学习了代码中常见的语法在 babel 的 AST 中对应的节点。

我们学习了：标识符 Identifer、各种字面量 xxLiteral、各种语句 xxStatement，各种声明语句 xxDeclaration，各种表达式 xxExpression，以及 Class、Modules、File、Program、Directive、Comment 这些 AST 节点。

了解了这些节点，就能知道平时写的代码是怎么用 AST 表示的，当然也不需要记，可以去文档或一些工具网站 (astexpoler.net) 去查。

AST 节点可能同时有多种类型，确定一种 AST 节点是什么类型主要看它的特点，比如 Statement 的特点是可以单独执行，Expression 的特点是有返回值，所以一些可以单独执行的 Expression 会包一层 ExpressionStatement 执行。

不同 AST 节点有不同的属性来存放各自对应的源码内容，但是都有一些公共属性如 type、xxComments、loc 等。

学会了 AST，就可以把对代码的操作转为对 AST 的操作了。

![f4ad69899c811ee2b837b7ddb9cebc93.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![4fab34e942a11ee5f3d4c0f54ab9afe5.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[c8a62a838d6796eca16f67f71bdfa0bd.png]: /images/20221005/1aac47106d734ba7b9c03ae18e4a18ca.png
[128e5beaab2925ffbd950de05960da7e.png]: /images/20221005/70708fc583054c14b05e6bea13853b16.png
[b8a35163206391b29eb80193f0c1d804.png]: /images/20221005/6ea8bd0c38e748c88c6eabe087ad0caf.png
[778c0fc5bf6aac495fdbc5a8665fa945.png]: /images/20221005/673b659193874dd18c13ffa97785f526.png
[c24d3d9ae6d6899abba499f1e8486405.png]: /images/20221005/95b1cb08a848447cb9cc232557fc1c2f.png
[361301770e22eef3f3c26bec8fe4a304.png]: /images/20221005/725b13761c864980af1c4dfcbd96d4ff.png
[722a6a7aba56a53d29de87d23fc385e8.png]: /images/20221005/e450da5dde7a4ff0be2174be7af824b7.png
[82af219a3de02864edc08e4f89016f19.png]: /images/20221005/d7f59d9191df4942bcd458f71df06c83.png
[d57f9d761f41f60d81f4681ec0f556e2.png]: /images/20221005/c7d89b9b8a0c4c7ea97be988e02492fb.png
[2db5825e50f422331c8a1ccb83f04b8e.png]: /images/20221005/7a5259430491421183263f51f1f09f4e.png
[17de28113f2d24056ab479a70d4ec7b8.png]: /images/20221005/3b93885231a942b883b3af82139851d8.png
[d1db01f8078ffdb18a815687d8717bd1.png]: /images/20221005/3efeeae12bbf4b8a931ec60e1fa18eb3.png
[f4ad69899c811ee2b837b7ddb9cebc93.gif]: /images/20221005/69d7a37a5ae745f992e676d0ca3d780f.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[4fab34e942a11ee5f3d4c0f54ab9afe5.gif]: /images/20221005/37c5e88c85a5444eb0551d3aef851068.png