抽象语法树AST（Abstract Syntax Tree）

最新推荐文章于 2025-03-20 14:20:54 发布

码工枚速

最新推荐文章于 2025-03-20 14:20:54 发布

阅读量391

点赞数

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/birdbest1/article/details/129241716

版权

JavaScript执行从读取文件到生成机器码，经历词法分析、语法分析和语义分析。词法分析识别单词符号，生成令牌流；语法分析将令牌流转化为抽象语法树AST；语义分析审查类型，收集类型信息。了解AST对于前端开发者理解插件和工具的实现至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 的执行过程

JS执行的第一步是读取 js 文件中的字符流，然后通过词法分析生成令牌流Tokens，之后再通过语法分析生成 AST（Abstract Syntax Tree），最后生成机器码执行。

模版语法-->抽象语法树AST-->渲染函数(h函数)-->虚拟节点(diff在此运行)-->界面生成AST需要用到指针算法和Stack数据结构

什么是AST（抽象语法树）?

抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

为什么要了解AST ?

如果你想了解前端常用的一些插件或者工具是如何实现的？那么你就得了解 AST，比如说Javascript转译、代码压缩、css预处理器、elint、pretiier等功能的实现，都是建立在 AST 的基础之上。

JavaScript 是一种解释型脚本语言,与 C、C++ 等语言需要先编译再运行不同,使用 JavaScript 编写的代码不需要编译成目标源码, 可以直接运行(编译和解释是一次性完成的)。

编译是把输入的源程序翻译生成为目标代码(例如，字节码等)，并存下来（无论是存在内存中还是磁盘上），后续可直接执行此目标代码，即可以复用；
解释是对输入的源程序边翻译边执行一次性完成，期间不生成可存储的目标代码。

一些编程语言是同时采用编译器与解释器来实现的，包含Python，Java， C、C++ 等，先将代码编译为字节码，运行字节码时再进行解释。所谓“解释型语言”并不是不用编译，而只是不需要用户显式去使用编译器得到可执行代码而已。

词法分析

词法分析是编译过程的第一个阶段，也称之为扫描(Scanner)。这个阶段的任务可以看成是-从左到右一个字符一个字符地读入源程序，从中识别出一个个“单词”符号，即对构成源程序的字符流进行扫描然后根据构词规则识别单词(也称单词符号或符号)；

通过词法分析程序实现上述读入源程序，识别符号的任务，词法分析过程依据的是语言的词法规则；

输出：词法分析程序输出的“单词”常以二元组的方式输出，即单词种别和单词自身的值；

认识：词法，定义组成语言的单词，是语言中最小单元；

词法分析，也称之为扫描（scanner），简单来说就是调用 next() 方法，一个一个字母的来读取字符，然后与定义好的 JavaScript 关键字做比较，生成对应的令牌流Tokens。令牌Token是一个不可分割的最小单元，例如 var 这三个字符，它只能作为一个整体，语义上不能再被分解，因此它是一个令牌Token。词法分析器里，每个关键字是一个令牌Token ，每个标识符是一个令牌Token，每个操作符是一个令牌Token，每个标点符号也都是一个令牌Token。除此之外，还会过滤掉源程序中的注释和空白字符（换行符、空格、制表符等）。

最终，整个代码将被分割进一个令牌流Tokens列表（或者说一维数组）。