AST结构初探_ast explorer

示例代码：

let obj={
    name:'xiaojianbang',
    add:function(a,b){
       return a+b+1000;
    },
    mul:function(a,b){
      return a*b
    },
}
var a=1;

AST explorer结构如下

【第一层】，最上层的表达式

body本身是一个数组，数组里的每个成员都是一个表达式 。

VeriableDeclaration是表达式类型,；

kind是变量声明语句所用的关键字；

declarations表明具体的变量，是一个数组，因为一个表达式可以声明多个变量，比如let a,b。

其他的比如计算表达式框架如下图：

【第二层】 declarations具体的变量结构

 declarations数组中具体变量每一个都是"VariableDeclarator"表示，里边的属性主要是id和init。、id表达的表示符，上边是Identifier标识符。name是标识符名称。（赋值表达式等号的左边）

init表明声明的变量值，如果没有赋值，init那就是null。（赋值表达式等号的右边）

【第三层】init内容（赋值表达式所赋的值）

主要是三个属性，type、 properties、extra

type是ObjectExpression，表示的是对象表达式。

properties是一个数组，数组里边的内容每个值对应一个成员，对象里边的一个属性。

【第四层】 properties具体的对象（对象里边的具体属性）

1）对象的属性

name:'xiaojianbang',

 properties具体的对象主要包含三个节点，如下

 （1）type节点为ObjectProperty，表示对象属性。

 （2） key节点是type属性一个Identifier标识符，neme属性是name，表达的是标识符名称。

 （3） value节点type属性StringLiteral，value表示的是具体的值（即被赋予的值）

2）对象的函数

 add:function(a,b){
       return a
 }

 properties具体的对象主要包含三个节点，如下，其他跟上边相同，关键是value节点

 

value中包含以下节点type、id、generator、async、parames、body、directives、body。

（1）type为FunctionExpression表达式

（2）由于代码赋值的是匿名函数，所以id是空的

（3）parames表示函数的参数，通常是一个数组，没有参数是一个空数组

（4）body表明是一个函数体

（5）directives，如果有‘use strict’,就会显示这个

（6）body，函数里边的复制内容

（第七层）函数里边的return表达式 

return a+b+1000;

 

 value中包含以下节点type，argument。

（1）type是ReturnStatement（返回语句）。

（2）argument是return语句返回的内容。

argument的具体内容如下：

type是BinaryExpression，表示二项式，二项式（二元运算符），主要分三部分：left、operator、right。进一步right中的type是NumericLiteral数值字面量