Open JesseZhao1990 opened 6 years ago
一般来说,程序中的一段源代码在执行之前会经历下面三个步骤
可能以上的这些听起来有些云里雾里。因为在平时写代码的时候,不关注这些也能写代码。但是多了解一些,就多一扇看到未知世界的窗口。你肯定使用过前端的很多工具插件,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 把js源码转化为抽象语法树的解析器。前边我们也说了。浏览器在执行js之前会把js源码通过解析器转化为抽象语法树,再进一步转化为字节码甚至是机器码。
常用的JavaScript Parser有:
其实从以上的三个工具,也可大致猜测到抽象语法树的一般用途了。大致分为几类吧
一般来说,程序中的一段源代码在执行之前会经历下面三个步骤
可能以上的这些听起来有些云里雾里。因为在平时写代码的时候,不关注这些也能写代码。但是多了解一些,就多一扇看到未知世界的窗口。你肯定使用过前端的很多工具插件,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在执行之前的三步中的前两步都是具体的干了啥。
第一步,词法分析,以上代码词法分析之后长成如下图所示 第二步,语法分析,生产抽象语法树,生成的抽象语法树如下图所示
JavaScript Parser
JavaScript Parser 把js源码转化为抽象语法树的解析器。前边我们也说了。浏览器在执行js之前会把js源码通过解析器转化为抽象语法树,再进一步转化为字节码甚至是机器码。
常用的JavaScript Parser有:
使用Esprima生成并使用抽象语法树。
抽象语法树的用途
其实从以上的三个工具,也可大致猜测到抽象语法树的一般用途了。大致分为几类吧