争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

如何取得JS函数参数名 ?用AST取得js函数参数名的方法区分

时间:2024/6/1作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于怎样获取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)上有详细介绍。

以上就是怎样获取JS函数参数名 ?用AST获取js函数参数名的方法分析的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:怎样取得JS函数参数名 ?用AST取得js函数参数名的办法区分




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版