拆解
通过抽象语法树解析,我们可以像童年时拆解玩具一样,透视Javascript这台机器的运转,并且重新按着你的意愿来组装。
** 现在,我们拆解一个简单的add函数**
function add(a, b) {
return a + b
}
首先,我们拿到的这个语法块,是一个FunctionDeclaration。
用力拆开,它成了三块:
一个id,就是它的名字,即add
两个params,就是它的参数,即[a, b]
一块body,也就是大括号内的一堆东西
add没办法继续拆下去了,它是一个最基础Identifier(标志)对象
{
name: 'add'
type: 'identifier'
...
}
params继续拆下去,其实是两个Identifier组成的数组。之后也没办法拆下去了
[
{
name: 'a'
type: 'identifier'
...
},
{
name: 'b'
type: 'identifier'
...
}
]
接下来,我们继续拆开body 我们发现,body其实是一个BlockStatement对象,用来表示是
{return a + b}
打开Blockstatement,里面藏着一个ReturnStatement对象,用来表示return a + b
继续打开ReturnStatement,里面是一个BinaryExpression,用来表示a + b
继续打开BinaryExpression,它成了三部分,left,operator,right
operator 即 +
left 里面装的,是Identifier对象 a
right 里面装的,是Identifer对象 b
看!抽象语法树(Abstract Syntax Tree),的确是一种标准的树结构。
那么,上面我们提到的Identifier、Blockstatement、ReturnStatement、BinaryExpression, 这一个个小部件的说明书去哪查?
Parser API
改装
后续补上。
网友评论