寫在最前
最近項目有個需求,獲取函數參數名,聽起來很簡單,但有了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/留言),感激不盡!