抽象语法树(Abstract Syntax Tree)

一般来说,程序中的一段源代码在执行之前会经历下面三个步骤
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;

第一步,词法分析,以上代码词法分析之后长成如下图所示
image
第二步,语法分析,生产抽象语法树,生成的抽象语法树如下图所示
image

JavaScript Parser

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

常用的JavaScript Parser有:

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

  1. 通过esprima将一个空函数的源码生成一棵AST树
  2. 通过estraverse遍历并更新AST树
  3. 通过escodegen将AST重新生成源码

抽象语法树的用途

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

  1. IDE插件,如代码语法检查,代码风格检查,代码的格式化,代码高亮,代码错误等等之类的
  2. 代码的混淆压缩,如UglifyJS2等
  3. 转换代码的工具。如webpack,rollup,各种代码规范之间的转换,ts,jsx等转换为原生js

前端
enjoy life, enjoy coding
1.5k 声望
560 粉丝
0 条评论
推荐阅读
前端也需要好好的精进自己的算法
算法 前端发展的再快,也不要忘记精进自己的算法,算法是灵魂和核心。我会把我刷过的算法题总结归类,不断完善。欢迎大家关注。 数组和堆栈 数组去重 旋转数组 如何快速找出两个数之和等于某一个值的两个数? 快...

jessezhao1990452阅读 18.2k评论 10

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.2k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.7k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 19.9k评论 9

1.5k 声望
560 粉丝
宣传栏