JavaScript 常见 AST 梳理，2024年阿里前端面试题精选

最新推荐文章于 2024-09-08 13:43:50 发布

2401_84003554

最新推荐文章于 2024-09-08 13:43:50 发布

阅读量703

点赞数 27

分类专栏： 2024年程序员学习文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2401_84003554/article/details/137229461

版权

2024年程序员学习专栏收录该内容

191 篇文章 0 订阅

订阅专栏

它们对应的AST如图：

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

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

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

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

function(){};

class{}

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

a = function() {}

b = class{}

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

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

Class

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

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

比如下面的代码

class Guang extends Person{

name = ‘guang’;

constructor() {}

eat() {}

}

对应的AST是这样的

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。

图中黄框标出的是 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 节点为

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

Program & Directive

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

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

File & Comment

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

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

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

AST 可视化查看工具

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

这个网站可以查看代码 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 的操作了。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。