摘要：表達(dá)式語句聲明和構(gòu)造函數(shù)聲明對(duì)應(yīng)的有或者，他們一個(gè)是聲明一個(gè)是表達(dá)式，處理方式是相同的，進(jìn)入對(duì)象內(nèi)部，找到為的對(duì)象，獲取參數(shù)數(shù)據(jù)。構(gòu)造函數(shù)對(duì)字符串進(jìn)行處理，分割參數(shù)箭頭函數(shù)箭頭函數(shù)是，也僅僅是名稱不同，內(nèi)部結(jié)構(gòu)幾乎一致。

最近項(xiàng)目有個(gè)需求，獲取函數(shù)參數(shù)名，聽起來很簡單，但有了ES6，參數(shù)和函數(shù)寫法千奇百怪，在github上大概看了幾個(gè)庫，基本上都是正則，
對(duì)通用的寫法能夠覆蓋，稍微越過邊界，往往無法正確匹配。

于是就有了使用AST去進(jìn)行覆蓋查找的想法。

抽象語法樹（abstract syntax tree或者縮寫為AST），或者語法樹（syntax tree），是源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式。

通過AST，我們可以對(duì)代碼進(jìn)行查找，看起來好像正則表達(dá)式也可以做到，那么為什么要用AST而不用正則？

就說從函數(shù)獲取參數(shù)名，夸張點(diǎn)，如果有以下表達(dá)式：

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){}

參數(shù)是[a,b,c,d,e,f,g,h]

你確定還想用正則去匹配參數(shù)名稱嗎...

AST是從代碼的意義去編輯，而正則只能從代碼的字面去編輯。

以上夸張的函數(shù)，使用AST去分析，可以很輕松獲取它的參數(shù)名。

我們使用esprima，一個(gè)可以將Javascript代碼解析成抽象樹的庫。

首先我們需要安裝它：

npm install esprima

接著調(diào)用：

const esprima=require("esprima")

接下來就是分析的時(shí)候了。

先來個(gè)簡單的例子：
function a(b){}

通過esprima解析后，生成結(jié)構(gòu)圖如下：

{
    "type": "Program",
    "body": [
        {   // 這個(gè)type表示這是一個(gè)函數(shù)表達(dá)式
            "type": "FunctionDeclaration",
            "id": {
                "type": "Identifier",
                "name": "a"
            },
            "params": [
                {
                    // 參數(shù)數(shù)組內(nèi)的Identifier代表參數(shù)
                    "type": "Identifier",
                    "name": "b"
                }
            ],
            "body": {
                "type": "BlockStatement",
                "body": []
            },
            "generator": false,
            "expression": false,
            "async": false
        }
    ],
    "sourceType": "script"
}

思路：

FunctionDeclaration說明是一個(gè)函數(shù)表達(dá)式，進(jìn)入params屬性。

判斷params中每一個(gè)的type是否為Identifier，在params屬性下的Identifier就代表是參數(shù)。

找出name屬性的值，結(jié)果為["b"]。

根據(jù)以上思路，我們可以寫出一個(gè)簡單的獲取參數(shù)的方法了。

function getParams(fn){
  // 此處分析的代碼必須是字符串
  let astEsprima=esprima.parseScript(fn.toString())
  let funcParams = []
  let node = astEsprima.body[0]
  // 找到type，進(jìn)入params屬性
  if (node.type === "FunctionDeclaration") funcParams = node.params
  let validParam=[]
  funcParams.forEach(obj=>{
    if(obj.type==="Identifier")
      validParam.push(obj.name)
  })
  return validParam
}

測試一番，獲取結(jié)果["b"]，慶祝收工。

好吧，別高興太早了，要知道函數(shù)的創(chuàng)建方法不下10種，而參數(shù)寫法又有好幾種...

以下是一部分的函數(shù)創(chuàng)建方法和參數(shù)寫法

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){}})()")

有什么想法？如果你有發(fā)出"我K"的想法，那說明我這個(gè)裝逼還算成功- -...

其實(shí)只需要分幾種情況(很多寫法的type都是一致的)，就可以完全滲入到以上所有的參數(shù)對(duì)象內(nèi)部，再進(jìn)行參數(shù)獲取就是循環(huán)+判斷解決的事了。

由于篇幅問題，這里不一一分析，只是將AST分析樹所用的type和一些注意點(diǎn)。

上面注釋中let a=function(x=1){}和a=function(...x){}是兩種意義。

其中let a=function(x=1){}指的是變量聲明語句，

對(duì)應(yīng)的type是VariableDeclaration，需要進(jìn)入它的初始值init就可以獲取到函數(shù)所在的語法對(duì)象，它的type是FunctionExpression函數(shù)表達(dá)式，再去params中查找即可。

變量聲明語句：

├──VariableDeclaration....init
        ├──FunctionExpression.params

而a=function(...x){}是表達(dá)式語句，

對(duì)應(yīng)的type是ExpressionStatement，需要進(jìn)入它的表達(dá)式expression獲取到表達(dá)式內(nèi)部，這時(shí)我們要進(jìn)入賦值表達(dá)式(type為AssignmentExpression)的右邊(right屬性)，
獲取函數(shù)所在的語法對(duì)象，它的type同樣也是FunctionExpression函數(shù)表達(dá)式。

表達(dá)式語句：

├──ExpressionStatement.expression
        ├──AssignmentExpression.right
                ├──FunctionExpression.params

class聲明對(duì)應(yīng)的type有ClassDeclaration(class xx{...})或者ClassExpression(let x=class{...})，他們一個(gè)是聲明一個(gè)是表達(dá)式，處理方式是相同的，
進(jìn)入對(duì)象內(nèi)部，找到kind為constructor的對(duì)象，獲取參數(shù)數(shù)據(jù)。

class聲明語句：

├──ClassDeclaration...body...
        ├──{kind:constructor}
                ├──FunctionExpression.params

Function構(gòu)造函數(shù)對(duì)應(yīng)的type是NewExpression或者ClassExpression，參數(shù)在屬性arguments內(nèi)部，但是Function的參數(shù)都是字符串，
而且最后一個(gè)參數(shù)一定是函數(shù)內(nèi)部語句，因此對(duì)于Function構(gòu)造函數(shù)，就是對(duì)字符串進(jìn)行處理。

Function構(gòu)造函數(shù)

├──NewExpression.arguments
        ├──{value:}
         ---->對(duì)字符串進(jìn)行處理，分割參數(shù)

箭頭函數(shù)type是ArrowFunctionExpression，也僅僅是名稱不同，內(nèi)部結(jié)構(gòu)幾乎一致。

函數(shù)結(jié)構(gòu)的type就到此。

參數(shù)的type有以下：

Identifier：最終我們需要獲取的參數(shù)值的type

Property：當(dāng)存在解構(gòu)參數(shù)，例如[a,b] or {x,y}

ArrayPattern：存在解構(gòu)參數(shù)并且是數(shù)組，例如[a,b]

ObjectPattern：存在解構(gòu)參數(shù)并且是對(duì)象，例如{x,y}

RestElement：存在擴(kuò)展運(yùn)算符，例如(...args)

我們只需要設(shè)置一個(gè)遞歸循環(huán)，思路和上面一樣，一層進(jìn)入另一層，在內(nèi)部進(jìn)行查找。

篇幅有限，就寫這么多，接著做一個(gè)總結(jié)。

這篇講的主旨只有1個(gè)，通過對(duì)AST樹中每一個(gè)對(duì)象的type分析，type表示的是對(duì)應(yīng)的代碼的意義，也是代碼的語義，例如

VariableDeclaration內(nèi)部一定會(huì)有init，為什么，因?yàn)樽兞柯暶魇怯谐跏贾档?，如果你不設(shè)置，那么就為undefined

type遠(yuǎn)不止這次說的這么多，官網(wǎng)(或者Google)上有詳細(xì)介紹。

AST獲取函數(shù)參數(shù)源代碼在此。

如果本文對(duì)你有所幫助，歡迎STAR，或者你對(duì)此有什么更好的想法，歡迎留言！

最重要如果發(fā)現(xiàn)了BUG或者漏匹配，請一定要告知(Issue/PR/留言)，感激不盡！