1. 程式人生 > >如何通過AST樹去獲取JS函式引數名

如何通過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"
}

思路:

  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)上有詳細介紹。

最後

如果本文對你有所幫助,歡迎STAR,或者你對此有什麼更好的想法,歡迎留言!

最重要如果發現了BUG或者漏匹配,請一定要告知(Issue/PR/留言),感激不盡!