抽象语法树(Abstract Syntax Tree)

余学文发布于2019-08-22 16:20 / 1856人阅读

摘要：例如会被分解成解析语法分析这个过程是将词法单元流数组转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树，这个树就叫抽象语法树。常用的有使用生成并使用抽象语法树。

一般来说，程序中的一段源代码在执行之前会经历下面三个步骤
1 分词／词法分析
这个过程会将由字符组成的字符串分解成有意义的代码快，这些代码块被称为词法单元。例如 var a = 4；会被分解成 var、a、=、4、;

2 解析／语法分析
这个过程是将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树，这个树就叫“抽象语法树”（AST）。全称 Abstract Syntax Tree。

3 代码生成
将AST转换成可执行代码的过程称为代码生成。抛开具体细节不讲，简单来说就是有某种方法可以将var a= 4; 的AST转化为一组机器指令,用来创建一个叫做a的变量，并将一个值储存在a中。

可能以上的这些听起来有些云里雾里。因为在平时写代码的时候，不关注这些也能写代码。但是多了解一些，就多一扇看到未知世界的窗口。你肯定使用过前端的很多工具插件，webpack，eslint啥的。你知道这些工具的核心都是通过抽象语法树这个概念来实现对代码的检查，分析，转换的吗？

抽象语法树的定义

In computer science, an abstract syntax tree (AST), or just syntax tree, is a tree representation of the abstract syntactic structure of source code written in a programming language.

翻译一下就是：
在计算机科学中，一个抽象语法树，或者词法树，是一个树，这个树表示或者说抽象出了编程语言的源代码的结构。

这个工具能在线可视化解析出一段代码的抽象语法树，可能能帮助你理解

这个可以进一步看更详尽的信息

下面举一个上边工具中的demo，看看js在执行之前的三步中的前两步都是具体的干了啥。

            var a = 42;
            var b = 5;
            function addA(d) {
            return a + d;
            }
            var c = addA(2) + b;

第一步，词法分析，以上代码词法分析之后长成如下图所示

第二步，语法分析，生产抽象语法树，生成的抽象语法树如下图所示

JavaScript Parser

JavaScript Parser 把js源码转化为抽象语法树的解析器。前边我们也说了。浏览器在执行js之前会把js源码通过解析器转化为抽象语法树，再进一步转化为字节码甚至是机器码。

常用的JavaScript Parser有：

Esprima

UglifyJS2

Traceur

Acorn

Espree

Shfit

使用Esprima生成并使用抽象语法树。

通过esprima将一个空函数的源码生成一棵AST树

通过estraverse遍历并更新AST树

通过escodegen将AST重新生成源码

抽象语法树的用途

其实从以上的三个工具，也可大致猜测到抽象语法树的一般用途了。大致分为几类吧

IDE插件，如代码语法检查，代码风格检查，代码的格式化，代码高亮，代码错误等等之类的

代码的混淆压缩，如UglifyJS2等

转换代码的工具。如webpack，rollup，各种代码规范之间的转换，ts，jsx等转换为原生js

服务器托管私有云抽象语法树 php tree 树 python 语法树 abstract?

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

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

何为语法树

摘要：原文链接何为语法树什么是语法树你是否曾想过，这个世界存在这么多语言的意义。语法树，计算机描述世界真理的树状结构。不同的语言，都会配之不同的语法分析器，而语法分析器是把源代码作为字符串读入解析，并建立语法树的程序。原文链接：BlueSun | 何为语法树什么是语法树？你是否曾想过，这个世界存在这么多语言的意义。假如现在你面前有一个物体，它是一个不规则的圆体，整个身体通红，头部还有...

hikui 2019-08-19 17:52 评论0 收藏0
Vue源码解析之Template转化为AST

摘要：下面用具体代码进行分析。匹配不到那么就是开始标签，调用函数解析。如这里的转化为加上是为了的下一步转为函数，本文中暂时不会用到。再把转化后的内容进。什么是AST 在Vue的mount过程中，template会被编译成AST语法树，AST是指抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式。...

huangjinnan 2019-08-21 17:00 评论0 收藏0
实现一个简易的webpack

摘要：首先一段代码转化成的抽象语法树是一个对象，该对象会有一个顶级的属性第二个属性是是一个数组。最终完成整个文件依赖的处理。参考文章抽象语法树一看就懂的抽象语法树源码所有的源码已经上传背景随着前端复杂度的不断提升，诞生出很多打包工具，比如最先的grunt，gulp。到后来的webpack和 Parcel。但是目前很多脚手架工具，比如vue-cli已经帮我们集成了一些构建工具的使用。有的时...

darcrand 2019-08-26 12:01 评论0 收藏0
JavaScript 是如何工作的：解析、抽象语法树（AST）+ 提升编译速度5个技巧

摘要：无论你使用的是解释型语言还是编译型语言，都有一个共同的部分将源代码作为纯文本解析为抽象语法树的数据结构。和抽象语法树相对的是具体语法树，通常称作分析树。这是引入字节码缓存的原因。这是专门探索 JavaScript 及其所构建的组件的系列文章的第 14 篇。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！如果你错过了前面的章节，可以在这里找到它们： JavaS...

raoyi 2019-08-23 14:52 评论0 收藏0
PHP7 的抽象语法树（AST）带来的变化

摘要：本文并不会告诉你抽象语法树是什么，这需要你自己去了解，这里只是描述给带来的一些变化。中在语法分析阶段不再直接生成，而是先生成，所以过程多了一步词法扫描分析，将源文件转换成流语法分析，从流生成抽象语法树从抽象语法树生成。本文大部分内容参照 AST 的 RFC 文档而成：https://wiki.php.net/rfc/abstract_syntax_tree，为了易于理解从源文档中节选...

Coding01 2019-06-27 11:45 评论0 收藏0