javascript ast篇一:变量声明 VariableDeclaration

@TOC

变量声明转换成ast基本结构

链接:js 在线ast 演示,结构非常清晰 以下的分享都是基于acorn(babel就是用的该库)

在这里插入图片描述

子节点说明

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

1,2,3项比较固定,重点说下4 declarations 变量声明
declarations 翻译成中文是 声明的意思 里面是个数组结构
正常我们一行声明一个变量,那么数组里面就一个元素
例如:var 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是不是变量说明符

VariableDeclarator 说明

VariableDeclarator 包括 type,start,end,id,init
type 就是 VariableDeclarator
start,end 开始位置和结束位置
id: 是个标示符类型 包含类型,位置,name
在这里插入图片描述
Identifier 包含 type,start,end,name 字段

init 说明该变量初始化的值,就是 = 号右边的值
如果没有初始化,就为null,例如 var a; 中的a的初始化值就是null
见图
在这里插入图片描述

下面举个例子说明变量初始化不同值,init的变化,已 var a 为列
例如1: var a = 1;
在这里插入图片描述

例如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

猜你喜欢

转载自blog.csdn.net/wasdxie/article/details/85914676