什么是抽象语法树(AST)
AST是源代码语法结构的一种抽象表示,它以树状的形式表现程序代码;
什么是acron
acron是一个javascript解析器(parser),通过它的parse方法可以解析出javascript程序的AST;
git地址:https://github.com/acornjs/acorn
本文没有深入介绍acron,只是利用acron生成的AST结构来说明抽象语法树;
AST的结构
下面展示了一段源代码以及利用acron生成的AST树的结构;
let a = 1;
function func(b) {
switch (b) {
case 1: break;
case 2: break;
}
}
可以看到AST有一个program根结点;
下面通过body关联了VariableDeclaration(变量声明)对应变量a的声明,以及FunctionDeclaration(函数声明)对应函数func的声明;
函数声明结点下通过id关联了一个Identifier(标识符)对应函数名是func,通过params关联了一个Identifier(标识符)对应变量名是b,通过body关联了一个BlockStatement(块状语句)对应函数体是一个块状语句;
...
整个树完整的说明了源代码;
AST主要结点类型
因为AST是用树表示JS程序的语法,所以AST的结点类型与JS语法息息相关
Declaration(声明)
该结点代码对应的代码块是一段声明,主要有函数声明(FunctionDeclaration)、变量声明(VariableDeclaration);
Statement(语句)
该结点代码对应的代码块是一个语句,主要有BlockStatement、ExpressionStatement、IfStatement、BreakStatement、ContinueStatement、SwitchStatement、ReturnStatement、WhileStatement、ForStatement等;
Expression(表达式)
该结点代码对应的代码是一个表达式,主要有ThisExpression、ArrayExpression、ObjectExpression、FunctionExpression、ArrowExpression、UnaryExpression、BinaryExpression、LogicalExpression、ConditionalExpression、NewExpression、CallExpression等;
Identifier(标识符)
该结点代码对应的代码是一个标识符,比如varName、funcName等;
Literal(字面量)
该结点代码对应的代码是一个字面量,比如"hello world"、231等;
详细内容可参考
https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API#Node_objects
另外给一个在线转AST的网站
https://astexplorer.net/