javascript ast语法树之变量声明VariableDeclaration

 

目录结构

1：
    VariableDeclaration 的基本结构
1.1：
    declarations 基本说明
1.1.1：
    declarations 下 VariableDeclarator 基本说明
1.1.1.1：
    VariableDeclarator 下的init 详细说明 

1、 js 在线ast 演示,结构非常清晰：

https://astexplorer.net/ 

2、declarations 基本说明：

​
1.type 说明节点的类型 变量声明为:VariableDeclaration
2.start,end 节点开始位置结束位置
3.kind 变量声明关键字 分为 var let const
4.declarations 描述声明的具体情况,变量的名字，变量的初始化描述都在里面。变量声明最主要的都在里面
​

1,2,3项比较固定,重点说下4 declarations 变量声明：

declarations 翻译成中文是 声明的意思 里面是个数组结构 正常我们一行声明一个变量，那么数组里面就一个元素

 

3、demo 效果如下 :

我们随变定义一个变量：a = 1

 

我们在增加一个变量 ：var a=1,b=2; 效果如下

 一句话概括: 一个 var、let、const 声明了几个变量,declarations 下面就有几个 VariableDeclarator

VariableDeclarator 翻译成中文就是变量说明符的意思上面的 var a=1,b=2; 就有2个变量说明符,效果可以看下下图，图中变黄的部分

思考: var a=1,b=2,c; 中的c是不是变量说明符,答案当然也是了。

4、declarations 下 VariableDeclarator 说明

VariableDeclarator 包括 type,start,end,id,init
type 就是 VariableDeclarator
start,end 开始位置和结束位置
id: 是个标示符类型 包含类型,位置，name 

Identifier 包含 type,start,end,name 字段

5、VariableDeclarator 下 init 基本说明

init 说明该变量初始化的值,就是 = 号右边的值
如果没有初始化，就为null,例如 var a; 中的a的初始化值就是null，见图

例如2：var a = “2”;

 

例如3:var a = ‘1’;

 

例如4: var a = true;

 

例如5：var a = undefined;

 

例如6 var a = null；

 

例如7：var a = 1+2;

 

例如8：var a = b +c；

例如9 var a = {y:1}

例如10 var a = function(){}

 

 

init 总结：如果是赋值基本类型中的除undefined以为 ，都是字面量类型literal

以下的都是赋值
1+2，b+c 这种是 BinaryExpression
函数为 FunctionExpression
对象 ObjectExpression
new Object() 为 NewExpression
[] 数组为 ArrayExpression
Math.sin() 为 CallExpression