如何經過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('esprima')

接下來就是分析的時候了。

---

一個簡單的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"
}

思路：

1. FunctionDeclaration說明是一個函數表達式，進入params屬性。
2. 判斷params中每個的type是否爲Identifier，在params屬性下的Identifier就表明是參數。
3. 找出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)上有詳細介紹。

---

最後

AST獲取函數參數源代碼在此。

若是本文對你有所幫助，歡迎STAR，或者你對此有什麼更好的想法，歡迎留言！

最重要若是發現了BUG或者漏匹配，請必定要告知(Issue/PR/留言)，感激涕零！