写在最前
最近项目有个需求,获取函数参数名,听起来很简单,但有了ES6,参数和函数写法千奇百怪,在github上大概看了几个库,基本上都是正则,
对通用的写法能够覆盖,稍微越过边界,往往无法正确匹配。
于是就有了使用AST
去进行覆盖查找的想法。
概念
抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree),是源代码的抽象语法结构的树状表现形式。
为什么要用AST
通过AST,我们可以对代码进行查找,看起来好像正则表达式也可以做到,那么为什么要用AST而不用正则?
就说从函数获取参数名,夸张点,如果有以下表达式:
function x(a=5,b="a",c=function(x=1,y){console.log(x=function(i=8,j){})},d={x:1,y:2,z:'x=6'},e=x=>7,f=['3=5','x.1','y,2',1],g=(x,y)=>{let z=(i,j=6)=>{}},h){}
参数是[a,b,c,d,e,f,g,h]
你确定还想用正则去匹配参数名称吗…
AST是从代码的意义去编辑,而正则只能从代码的字面去编辑。
以上夸张的函数,使用AST去分析,可以很轻松获取它的参数名。
Esprima
我们使用esprima,一个可以将Javascript代码解析成抽象树的库。
首先我们需要安装它:
npm install esprima
接着调用:
const esprima=require('require'')
接下来就是分析的时候了。
一个简单的AST例子
先来个简单的例子:
function a(b){}
通过esprima解析后,生成结构图如下:
{
"type": "Program",
"body": [
{ // 这个type表示这是一个函数表达式
"type": "FunctionDeclaration",
"id": {
"type": "Identifier",
"name": "a"
},
"params": [
{
// 参数数组内的Identifier代表参数
"type": "Identifier",
"name": "b"
}
],
"body": {
"type": "BlockStatement",
"body": []
},
"generator": false,
"expression": false,
"async": false
}
],
"sourceType": "script"
}
思路:
-
FunctionDeclaration
说明是一个函数表达式,进入params
属性。 - 判断
params
中每一个的type是否为Identifier
,在params
属性下的Identifier
就代表是参数。 - 找出name属性的值,结果为
['b']
。
根据以上思路,我们可以写出一个简单的获取参数的方法了。
function getParams(fn){
// 此处分析的代码必须是字符串
let astEsprima=esprima.parseScript(fn.toString())
let funcParams = []
let node = astEsprima.body[0]
// 找到type,进入params属性
if (node.type === "FunctionDeclaration") funcParams = node.params
let validParam=[]
funcParams.forEach(obj=>{
if(obj.type==="Identifier")
validParam.push(obj.name)
})
return validParam
}
测试一番,获取结果["b"]
,庆祝收工。
好吧,别高兴太早了,要知道函数的创建方法不下10种,而参数写法又有好几种…
以下是一部分的函数创建方法和参数写法
function a(x){}
// 注意:第二条和第三条在AST中意义不同
let a=function(x=1){}
a=function(...x){}
let a=([x]=[1])=>{}
async function a(x){}
function *a(x){}
class a{
constructor(x){}
}
new Function ('x','console.log(x)')
(function(){return function(x){}})()
eval("(function(){return function(a,b){}})()")
有什么想法?如果你有发出”我K”的想法,那说明我这个装逼还算成功- -…
其实只需要分几种情况(很多写法的type都是一致的),就可以完全渗入到以上所有的参数对象内部,再进行参数获取就是循环+判断解决的事了。
由于篇幅问题,这里不一一分析,只是将AST分析树所用的type和一些注意点。
函数结构
变量声明语句和表达式语句
上面注释中let a=function(x=1){}
和a=function(...x){}
是两种意义。
其中let a=function(x=1){}
指的是变量声明语句,
对应的type是VariableDeclaration
,需要进入它的初始值init
就可以获取到函数所在的语法对象,它的type是FunctionExpression
函数表达式,再去params
中查找即可。
变量声明语句:
├──VariableDeclaration....init
├──FunctionExpression.params
而a=function(...x){}
是表达式语句,
对应的type是ExpressionStatement
,需要进入它的表达式expression
获取到表达式内部,这时我们要进入赋值表达式(type为AssignmentExpression
)的右边(right属性
),
获取函数所在的语法对象,它的type同样也是FunctionExpression
函数表达式。
表达式语句:
├──ExpressionStatement.expression
├──AssignmentExpression.right
├──FunctionExpression.params
class声明和Function构造函数
class声明对应的type有ClassDeclaration
(class xx{…})或者ClassExpression
(let x=class{…}),他们一个是声明一个是表达式,处理方式是相同的,
进入对象内部,找到kind为constructor
的对象,获取参数数据。
class声明语句:
├──ClassDeclaration...body...
├──{kind:constructor}
├──FunctionExpression.params
Function构造函数对应的type是NewExpression
或者ClassExpression
,参数在属性arguments
内部,但是Function的参数都是字符串,
而且最后一个参数一定是函数内部语句,因此对于Function构造函数,就是对字符串进行处理。
Function构造函数
├──NewExpression.arguments
├──{value:<String>}
---->对字符串进行处理,分割参数
箭头函数
箭头函数type是ArrowFunctionExpression
,也仅仅是名称不同,内部结构几乎一致。
函数结构的type就到此。
参数结构
参数的type有以下:
Identifier
:最终我们需要获取的参数值的type
Property
:当存在解构参数,例如[a,b] or {x,y}
ArrayPattern
:存在解构参数并且是数组,例如[a,b]
ObjectPattern
:存在解构参数并且是对象,例如{x,y}
RestElement
:存在扩展运算符,例如(...args)
我们只需要设置一个递归循环,思路和上面一样,一层进入另一层,在内部进行查找。
总结
篇幅有限,就写这么多,接着做一个总结。
这篇讲的主旨只有1个,通过对AST树中每一个对象的type分析,type表示的是对应的代码的意义,也是代码的语义,例如
VariableDeclaration
内部一定会有init
,为什么,因为变量声明是有初始值的,如果你不设置,那么就为undefined
type远不止这次说的这么多,官网(或者Google)上有详细介绍。
最后
如果本文对你有所帮助,欢迎STAR,或者你对此有什么更好的想法,欢迎留言!
最重要如果发现了BUG或者漏匹配,请一定要告知(Issue/PR/留言),感激不尽!