你需要深入了解一下 JavaScript 的 new Function

网站建设3年前发布
15 0 0

20230306101324b27db7d28d68a1bb70d3756053436e9c6e1b8b124,语法如下:
,最后一个参数必须是函数体,其余参数作为传递给函数体的参数。
,例如:,我们平时开发 JavaScript 或者 Node.js 的时候,没有理由使用 new Function 构造函数,因为不需要直接使用函数或者 () => {} 箭头函数。
,这是否意味着 new Function 语法是一个鸡肋的功能?
,千万不要这样想! 因为它绝对不是你想的那样!
,new Function 语法有一个特别强大的特性,使它在 JavaScript 中发挥着不可替代的作用。
,有什么特点?也就是函数体的数据格式是字符串,真是不可思议!
,这里有几个例子来展示 new Function 语法的微妙之处。
,1).无效的 JSON 对象字符串合法化,例如,有以下字符串:
,其中的字符串不符合JSON格式(键值需要双引号),使用JSON.parse()解析会报错。
,那么,有没有什么办法可以把这个字符串对象转换成可以解析的JSON呢?
,很多人会想到正则匹配然后替换,或者使用eval等渣属性进行处理。
,没必要这么麻烦, new Function 上线了,就完美了!
,JS 代码如下所示:,使用返回语法,你可以轻松地将任意字符串转换为其他 JavaScript数据类型。
,2).模板字符串作为模板,比如Vue、React等现在都有自己的模板语法,比如{}语法。
,如果我们想直接使用 ES6 自己的语法作为模板语言,就必须使用 new Function 的能力,比如下面的 HTML:,我们可以扩展字符串并定义一个名为 interpolate 的字符串方法来将 ES6 语法字符串转换为可执行的 ES6 代码:,至此,只要有对应的数据,我们就可以根据<template>模板获取最终编译好的HTML字符串,例如:,可以看出,无需任何第三方模板渲染引擎,就能使用复杂语法下的模板渲染效果,原生JS爱好者欣喜若狂。
,3).闭包和上下文,new Function 的 body 参数中变量的上下文是全局的,不是私有的,没有所谓的闭包。
,例如,下面新函数代码中的值与主函数中的值无关:,如果是常规函数语法,没有问题:,4).其他,与 new Function 语法类似的是新的RegExp,它可以使用字符串作为正则表达式的内容,特别适合动态匹配,或者增加代码混淆(一些混淆工具可以对字符串进行混淆)。
,例如,要匹配以动态值开头的属性值,可以使用以下用法:
,以上就是我今天跟你分享的关于new Function语法的知识,希望对你有所帮助,如果你觉得有用的话,请记得点赞我,关注我,并将其分享给你身边的朋友,也许能够帮助到他。
,最后,感谢你的阅读,期待你的关注,我们一起快乐学编程。

© 版权声明

相关文章