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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章