@TOC
目录结构
1.VariableDeclaration 的基本结构
2.declarations 基本说明
3.declarations 下 VariableDeclarator 基本说明
3.VariableDeclarator 下的init 详细说明
变量声明转换成ast基本结构
链接:js 在线ast 演示,结构非常清晰 以下的分享都是基于acorn(babel就是用的该库)
declarations 基本说明
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是不是变量说明符
declarations 下 VariableDeclarator 说明
VariableDeclarator 包括 type,start,end,id,init
type 就是 VariableDeclarator
start,end 开始位置和结束位置
id: 是个标示符类型 包含类型,位置,name
Identifier 包含 type,start,end,name 字段
VariableDeclarator 下 init 基本说明
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