怎樣取得JS函數參數名 ？用AST取得js函數參數名的方法分析

本篇文章帶給大家的內容是關於怎樣取得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] 或 {x,y}

ArrayPattern：存在解構參數且是數組，例如[a,b]

ObjectPattern：存在解構參數且是對象，例如{ x,y}

RestElement：存在擴充運算符，例如(...args)

#我們只需要設定一個遞歸循環，想法和上面一樣，一層進入另一層，在內部進行查找。

總結

篇幅有限，就寫這麼多，接著做一個總結。

這篇講的主題只有1個，透過對AST樹中每個物件的type分析，type表示的是對應的程式碼的意義，也是程式碼的語義，例如

VariableDeclaration內部一定會有init，為什麼，因為變數宣告是有初始值的，如果你不設置，那麼就為undefined

type遠不止這次說的這麼多，官網(或者Google)上有詳細介紹。

以上是怎樣取得JS函數參數名 ？用AST取得js函數參數名的方法分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！