媒介
Babel为当前最盛行的代码JavaScript编译器了,其运用的JavaScript剖析器为babel-parser,最初是从Acorn
项目fork
出来的。Acorn 非常快,易于运用,而且针对非范例特征(以及那些将来的范例特征) 设想了一个基于插件的架构。本文重要引见esprima
剖析天生的笼统语法树节点,esprima
的完成也是基于Acorn的。
剖析器 Parser
JavaScript Parser 是把js源码转化为笼统语法树(AST)的剖析器。这个步骤分为两个阶段:词法剖析(Lexical Analysis) 和 语法剖析(Syntactic Analysis)。
经常使用的JavaScript Parser:
词法剖析
词法剖析阶段把字符串情势的代码转换为 令牌(tokens)流。你能够把令牌看做是一个扁平的语法片断数组。
n * n;
比方上面n*n
的词法剖析获得效果以下:
[
{ type: { ... }, value: "n", start: 0, end: 1, loc: { ... } },
{ type: { ... }, value: "*", start: 2, end: 3, loc: { ... } },
{ type: { ... }, value: "n", start: 4, end: 5, loc: { ... } },
]
每一个 type 有一组属性来形貌该令牌:
{
type: {
label: 'name',
keyword: undefined,
beforeExpr: false,
startsExpr: true,
rightAssociative: false,
isLoop: false,
isAssign: false,
prefix: false,
postfix: false,
binop: null,
updateContext: null
},
...
}
和 AST 节点一样它们也有 start,end,loc 属性。
语法剖析
语法剖析就是依据词法剖析的效果,也就是令牌tokens,将其转换成AST。
function square(n) {
return n * n;
}
如上面代码,天生的AST构造以下:
{
type: "FunctionDeclaration",
id: {
type: "Identifier",
name: "square"
},
params: [{
type: "Identifier",
name: "n"
}],
body: {
type: "BlockStatement",
body: [{
type: "ReturnStatement",
argument: {
type: "BinaryExpression",
operator: "*",
left: {
type: "Identifier",
name: "n"
},
right: {
type: "Identifier",
name: "n"
}
}
}]
}
}
下文将对AST各个范例节点做诠释。更多AST天生,进口以下:
连系可视化东西,举个例子
以下代码:
var a = 42;
var b = 5;
function addA(d) {
return a + d;
}
var c = addA(2) + b;
第一步词法剖析以后长成以下图所示:
语法剖析,临盆笼统语法树,天生的笼统语法树以下图所示
Base
Node
一切节点范例都完成以下接口:
interface Node {
type: string;
range?: [number, number];
loc?: SourceLocation;
}
该type字段是示意AST变体范例的字符串。该loc字段示意节点的源位置信息。假如剖析器没有天生有关节点源位置的信息,则该字段为null;不然它是一个对象,包括一个肇端位置(被剖析的源地区的第一个字符的位置)和一个完毕位置.
interface SourceLocation {
start: Position;
end: Position;
source?: string | null;
}
每一个Position对象由一个line数字(1索引)和一个column数字(0索引)构成:
interface Position {
line: uint32 >= 1;
column: uint32 >= 0;
}
Programs
interface Program <: Node {
type: "Program";
sourceType: 'script' | 'module';
body: StatementListItem[] | ModuleItem[];
}
示意一个完全的源代码树。
Scripts and Modules
源代码数的泉源包括两种,一种是script剧本,一种是modules模块
当为script时,body为StatementListItem
。
当为modules时,body为ModuleItem
。
范例StatementListItem
和ModuleItem
范例以下。
type StatementListItem = Declaration | Statement;
type ModuleItem = ImportDeclaration | ExportDeclaration | StatementListItem;
ImportDeclaration
import语法,导入模块
type ImportDeclaration {
type: 'ImportDeclaration';
specifiers: ImportSpecifier[];
source: Literal;
}
ImportSpecifier
范例以下:
interface ImportSpecifier {
type: 'ImportSpecifier' | 'ImportDefaultSpecifier' | 'ImportNamespaceSpecifier';
local: Identifier;
imported?: Identifier;
}
ImportSpecifier
语法以下:
import { foo } from './foo';
ImportDefaultSpecifier
语法以下:
import foo from './foo';
ImportNamespaceSpecifier
语法以下
import * as foo from './foo';
ExportDeclaration
export范例以下
type ExportDeclaration = ExportAllDeclaration | ExportDefaultDeclaration | ExportNamedDeclaration;
ExportAllDeclaration
从指定模块中导出
interface ExportAllDeclaration {
type: 'ExportAllDeclaration';
source: Literal;
}
语法以下:
export * from './foo';
ExportDefaultDeclaration
导出默许模块
interface ExportDefaultDeclaration {
type: 'ExportDefaultDeclaration';
declaration: Identifier | BindingPattern | ClassDeclaration | Expression | FunctionDeclaration;
}
语法以下:
export default 'foo';
ExportNamedDeclaration
导出部份模块
interface ExportNamedDeclaration {
type: 'ExportNamedDeclaration';
declaration: ClassDeclaration | FunctionDeclaration | VariableDeclaration;
specifiers: ExportSpecifier[];
source: Literal;
}
语法以下:
export const foo = 'foo';
Declarations and Statements
declaration
,即声明,范例以下:
type Declaration = VariableDeclaration | FunctionDeclaration | ClassDeclaration;
statements
,即语句,范例以下:
type Statement = BlockStatement | BreakStatement | ContinueStatement |
DebuggerStatement | DoWhileStatement | EmptyStatement |
ExpressionStatement | ForStatement | ForInStatement |
ForOfStatement | FunctionDeclaration | IfStatement |
LabeledStatement | ReturnStatement | SwitchStatement |
ThrowStatement | TryStatement | VariableDeclaration |
WhileStatement | WithStatement;
VariableDeclarator
变量声明,kind 属性示意是什么范例的声明,由于 ES6 引入了 const/let。
interface VariableDeclaration <: Declaration {
type: "VariableDeclaration";
declarations: [ VariableDeclarator ];
kind: "var" | "let" | "const";
}
FunctionDeclaration
函数声明(非函数表达式)
interface FunctionDeclaration {
type: 'FunctionDeclaration';
id: Identifier | null;
params: FunctionParameter[];
body: BlockStatement;
generator: boolean;
async: boolean;
expression: false;
}
比方:
function foo() {}
function *bar() { yield "44"; }
async function noop() { await new Promise(function(resolve, reject) { resolve('55'); }) }
ClassDeclaration
类声明(非类表达式)
interface ClassDeclaration {
type: 'ClassDeclaration';
id: Identifier | null;
superClass: Identifier | null;
body: ClassBody;
}
ClassBody
声明以下:
interface ClassBody {
type: 'ClassBody';
body: MethodDefinition[];
}
MethodDefinition
示意要领声明;
interface MethodDefinition {
type: 'MethodDefinition';
key: Expression | null;
computed: boolean;
value: FunctionExpression | null;
kind: 'method' | 'constructor';
static: boolean;
}
class foo {
constructor() {}
method() {}
};
ContinueStatement
continue语句
interface ContinueStatement {
type: 'ContinueStatement';
label: Identifier | null;
}
比方:
for (var i = 0; i < 10; i++) {
if (i === 0) {
continue;
}
}
DebuggerStatement
debugger语句
interface DebuggerStatement {
type: 'DebuggerStatement';
}
比方
while(true) {
debugger;
}
DoWhileStatement
do-while语句
interface DoWhileStatement {
type: 'DoWhileStatement';
body: Statement;
test: Expression;
}
test
示意while前提
比方:
var i = 0;
do {
i++;
} while(i = 2)
EmptyStatement
空语句
interface EmptyStatement {
type: 'EmptyStatement';
}
比方:
if(true);
var a = [];
for(i = 0; i < a.length; a[i++] = 0);
ExpressionStatement
表达式语句,即,由单个表达式构成的语句。
interface ExpressionStatement {
type: 'ExpressionStatement';
expression: Expression;
directive?: string;
}
当表达式语句示意一个指令(比方“use strict”)时,directive属性将包括该指令字符串。
比方:
(function(){});
ForStatement
for语句
interface ForStatement {
type: 'ForStatement';
init: Expression | VariableDeclaration | null;
test: Expression | null;
update: Expression | null;
body: Statement;
}
ForInStatement
for…in语句
interface ForInStatement {
type: 'ForInStatement';
left: Expression;
right: Expression;
body: Statement;
each: false;
}
ForOfStatement
for…of语句
interface ForOfStatement {
type: 'ForOfStatement';
left: Expression;
right: Expression;
body: Statement;
}
IfStatement
if 语句
interface IfStatement {
type: 'IfStatement';
test: Expression;
consequent: Statement;
alternate?: Statement;
}
consequent
示意if掷中后内容,alternate
示意else或许else if的内容。
LabeledStatement
label语句,多用于准确的运用嵌套循环中的continue和break。
interface LabeledStatement {
type: 'LabeledStatement';
label: Identifier;
body: Statement;
}
如:
var num = 0;
outPoint:
for (var i = 0 ; i < 10 ; i++){
for (var j = 0 ; j < 10 ; j++){
if( i == 5 && j == 5 ){
break outPoint;
}
num++;
}
}
ReturnStatement
return 语句
interface ReturnStatement {
type: 'ReturnStatement';
argument: Expression | null;
}
SwitchStatement
Switch语句
interface SwitchStatement {
type: 'SwitchStatement';
discriminant: Expression;
cases: SwitchCase[];
}
discriminant
示意switch的变量。
SwitchCase
范例以下
interface SwitchCase {
type: 'SwitchCase';
test: Expression | null;
consequent: Statement[];
}
ThrowStatement
throw语句
interface ThrowStatement {
type: 'ThrowStatement';
argument: Expression;
}
TryStatement
try…catch语句
interface TryStatement {
type: 'TryStatement';
block: BlockStatement;
handler: CatchClause | null;
finalizer: BlockStatement | null;
}
handler
为catch处置惩罚声明内容,finalizer
为finally内容。
CatchClaus
范例以下
interface CatchClause {
type: 'CatchClause';
param: Identifier | BindingPattern;
body: BlockStatement;
}
比方:
try {
foo();
} catch (e) {
console.erroe(e);
} finally {
bar();
}
WhileStatement
while语句
interface WhileStatement {
type: 'WhileStatement';
test: Expression;
body: Statement;
}
test
为剖断表达式
WithStatement
with语句(指定块语句的作用域的作用域)
interface WithStatement {
type: 'WithStatement';
object: Expression;
body: Statement;
}
如:
var a = {};
with(a) {
name = 'xiao.ming';
}
console.log(a); // {name: 'xiao.ming'}
Expressions and Patterns
Expressions
可用范例以下:
type Expression = ThisExpression | Identifier | Literal |
ArrayExpression | ObjectExpression | FunctionExpression | ArrowFunctionExpression | ClassExpression |
TaggedTemplateExpression | MemberExpression | Super | MetaProperty |
NewExpression | CallExpression | UpdateExpression | AwaitExpression | UnaryExpression |
BinaryExpression | LogicalExpression | ConditionalExpression |
YieldExpression | AssignmentExpression | SequenceExpression;
Patterns
可用有两种范例,函数形式和对象形式以下:
type BindingPattern = ArrayPattern | ObjectPattern;
ThisExpression
this
表达式
interface ThisExpression {
type: 'ThisExpression';
}
Identifier
标识符,就是我们写 JS 时自定义的称号,如变量名,函数名,属性名,都归为标识符。响应的接口是如许的:
interface Identifier {
type: 'Identifier';
name: string;
}
Literal
字面量,这里不是指 [] 或许 {} 这些,而是自身语义就代表了一个值的字面量,如 1,“hello”, true 这些,另有正则表达式(有一个扩大的 Node 来示意正则表达式),如 /d?/。
interface Literal {
type: 'Literal';
value: boolean | number | string | RegExp | null;
raw: string;
regex?: { pattern: string, flags: string };
}
比方:
var a = 1;
var b = 'b';
var c = false;
var d = /\d/;
ArrayExpression
数组表达式
interface ArrayExpression {
type: 'ArrayExpression';
elements: ArrayExpressionElement[];
}
例:
[1, 2, 3, 4];
ArrayExpressionElement
数组表达式的节点,范例以下
type ArrayExpressionElement = Expression | SpreadElement;
Expression包括一切表达式,SpreadElement为扩大运算符语法。
SpreadElement
扩大运算符
interface SpreadElement {
type: 'SpreadElement';
argument: Expression;
}
如:
var a = [3, 4];
var b = [1, 2, ...a];
var c = {foo: 1};
var b = {bar: 2, ...c};
ObjectExpression
对象表达式
interface ObjectExpression {
type: 'ObjectExpression';
properties: Property[];
}
Property
代表为对象的属性形貌
范例以下
interface Property {
type: 'Property';
key: Expression;
computed: boolean;
value: Expression | null;
kind: 'get' | 'set' | 'init';
method: false;
shorthand: boolean;
}
kind
用来示意是一般的初始化,或许是 get/set。
比方:
var obj = {
foo: 'foo',
bar: function() {},
noop() {}, // method 为 true
['computed']: 'computed' // computed 为 true
}
FunctionExpression
函数表达式
interface FunctionExpression {
type: 'FunctionExpression';
id: Identifier | null;
params: FunctionParameter[];
body: BlockStatement;
generator: boolean;
async: boolean;
expression: boolean;
}
比方:
var foo = function () {}
ArrowFunctionExpression
箭头函数表达式
interface ArrowFunctionExpression {
type: 'ArrowFunctionExpression';
id: Identifier | null;
params: FunctionParameter[];
body: BlockStatement | Expression;
generator: boolean;
async: boolean;
expression: false;
}
generator
示意是不是为generator函数,async
示意是不是为async/await函数,params
为参数定义。
FunctionParameter
范例以下
type FunctionParameter = AssignmentPattern | Identifier | BindingPattern;
例:
var foo = () => {};
ClassExpression
类表达式
interface ClassExpression {
type: 'ClassExpression';
id: Identifier | null;
superClass: Identifier | null;
body: ClassBody;
}
比方:
var foo = class {
constructor() {}
method() {}
};
TaggedTemplateExpression
标记模板笔墨函数
interface TaggedTemplateExpression {
type: 'TaggedTemplateExpression';
readonly tag: Expression;
readonly quasi: TemplateLiteral;
}
TemplateLiteral
范例以下
interface TemplateLiteral {
type: 'TemplateLiteral';
quasis: TemplateElement[];
expressions: Expression[];
}
TemplateElement
范例以下
interface TemplateElement {
type: 'TemplateElement';
value: { cooked: string; raw: string };
tail: boolean;
}
比方
var foo = function(a){ console.log(a); }
foo`test`;
MemberExpression
属性成员表达式
interface MemberExpression {
type: 'MemberExpression';
computed: boolean;
object: Expression;
property: Expression;
}
比方:
const foo = {bar: 'bar'};
foo.bar;
foo['bar']; // computed 为 true
Super
父类关键字
interface Super {
type: 'Super';
}
比方:
class foo {};
class bar extends foo {
constructor() {
super();
}
}
MetaProperty
(这个不知道干吗用的)
interface MetaProperty {
type: 'MetaProperty';
meta: Identifier;
property: Identifier;
}
比方:
new.target // 经由过程new 声明的对象,new.target会存在
import.meta
CallExpression
函数实行表达式
interface CallExpression {
type: 'CallExpression';
callee: Expression | Import;
arguments: ArgumentListElement[];
}
Import范例,没搞懂。
interface Import {
type: 'Import'
}
ArgumentListElement
范例
type ArgumentListElement = Expression | SpreadElement;
如:
var foo = function (){};
foo();
NewExpression
new 表达式
interface NewExpression {
type: 'NewExpression';
callee: Expression;
arguments: ArgumentListElement[];
}
UpdateExpression
更新操作符表达式,如++
、--
;
interface UpdateExpression {
type: "UpdateExpression";
operator: '++' | '--';
argument: Expression;
prefix: boolean;
}
如:
var i = 0;
i++;
++i; // prefix为true
AwaitExpression
await表达式,会与async连用。
interface AwaitExpression {
type: 'AwaitExpression';
argument: Expression;
}
如
async function foo() {
var bar = function() {
new Primise(function(resolve, reject) {
setTimeout(function() {
resove('foo')
}, 1000);
});
}
return await bar();
}
foo() // foo
UnaryExpression
一元操作符表达式
interface UnaryExpression {
type: "UnaryExpression";
operator: UnaryOperator;
prefix: boolean;
argument: Expression;
}
罗列UnaryOperator
enum UnaryOperator {
"-" | "+" | "!" | "~" | "typeof" | "void" | "delete" | "throw"
}
BinaryExpression
二元操作符表达式
interface BinaryExpression {
type: 'BinaryExpression';
operator: BinaryOperator;
left: Expression;
right: Expression;
}
罗列BinaryOperator
enum BinaryOperator {
"==" | "!=" | "===" | "!=="
| "<" | "<=" | ">" | ">="
| "<<" | ">>" | ">>>"
| "+" | "-" | "*" | "/" | "%"
| "**" | "|" | "^" | "&" | "in"
| "instanceof"
| "|>"
}
LogicalExpression
逻辑运算符表达式
interface LogicalExpression {
type: 'LogicalExpression';
operator: '||' | '&&';
left: Expression;
right: Expression;
}
如:
var a = '-';
var b = a || '-';
if (a && b) {}
ConditionalExpression
前提运算符
interface ConditionalExpression {
type: 'ConditionalExpression';
test: Expression;
consequent: Expression;
alternate: Expression;
}
比方:
var a = true;
var b = a ? 'consequent' : 'alternate';
YieldExpression
yield表达式
interface YieldExpression {
type: 'YieldExpression';
argument: Expression | null;
delegate: boolean;
}
比方:
function* gen(x) {
var y = yield x + 2;
return y;
}
AssignmentExpression
赋值表达式。
interface AssignmentExpression {
type: 'AssignmentExpression';
operator: '=' | '*=' | '**=' | '/=' | '%=' | '+=' | '-=' |
'<<=' | '>>=' | '>>>=' | '&=' | '^=' | '|=';
left: Expression;
right: Expression;
}
operator
属性示意一个赋值运算符,left
和right
是赋值运算符摆布的表达式。
SequenceExpression
序列表达式(运用逗号)。
interface SequenceExpression {
type: 'SequenceExpression';
expressions: Expression[];
}
var a, b;
a = 1, b = 2
ArrayPattern
数组剖析形式
interface ArrayPattern {
type: 'ArrayPattern';
elements: ArrayPatternElement[];
}
例:
const [a, b] = [1,3];
elements代表数组节点
ArrayPatternElement以下
type ArrayPatternElement = AssignmentPattern | Identifier | BindingPattern | RestElement | null;
AssignmentPattern
默许赋值形式,数组剖析、对象剖析、函数参数默许值运用。
interface AssignmentPattern {
type: 'AssignmentPattern';
left: Identifier | BindingPattern;
right: Expression;
}
例:
const [a, b = 4] = [1,3];
RestElement
盈余参数形式,语法与扩大运算符邻近。
interface RestElement {
type: 'RestElement';
argument: Identifier | BindingPattern;
}
例:
const [a, b, ...c] = [1, 2, 3, 4];
ObjectPatterns
对象剖析形式
interface ObjectPattern {
type: 'ObjectPattern';
properties: Property[];
}
例:
const object = {a: 1, b: 2};
const { a, b } = object;
完毕
AST的作用大抵分为几类
- IDE运用,如代码作风检测(eslint等)、代码的格式化,代码高亮,代码毛病等等
- 代码的殽杂紧缩
- 转换代码的东西。如webpack,rollup,种种代码范例之间的转换,ts,jsx等转换为原生js
相识AST,终究照样为了让我们相识我们运用的东西,固然也让我们更相识JavaScript,更接近JavaScript。