如何通過AST樹去獲取JS函式引數名
寫在最前
最近專案有個需求，獲取函式引數名，聽起來很簡單，但有了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.paramsclass宣告和Function建構函式
class宣告對應的type有ClassDeclaration(class xx{...})或者ClassExpression(let x=class{...})，他們一個是宣告一個是表示式，處理方式是相同的，進入物件內部，找到kind為constructor的物件，獲取引數資料。
class宣告語句：
├──ClassDeclaration...body...
├──{kind:constructor}
├──FunctionExpression.paramsFunction建構函式對應的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/留言)，感激不盡！