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

开发 前端
JavaScript技术一直处于不断发展壮大中,如果你是前端开发人员或者JavaScript开发工程师,那么,今天这个知识点,你有必要认真了解一下,它就是“new Function”。

1、语法

语法如下:

let func = new Function ([arg1, arg2, …argN], functionBody);

最后一个参数必须是函数体,其余参数作为传递给函数体的参数。

例如:

let sum = new Function('a', 'b', 'return a + b');
console.log(sum(1, 2)); // the result is 3

我们平时开发 JavaScript 或者 Node.js 的时候,没有理由使用 new Function 构造函数,因为不需要直接使用函数或者 () => {} 箭头函数。

这是否意味着 new Function 语法是一个鸡肋的功能?

千万不要这样想! 因为它绝对不是你想的那样!

new Function 语法有一个特别强大的特性,使它在 JavaScript 中发挥着不可替代的作用。

有什么特点?也就是函数体的数据格式是字符串,真是不可思议!

不可替代的角色

这里有几个例子来展示 new Function 语法的微妙之处。

1).无效的 JSON 对象字符串合法化

例如,有以下字符串:

let str = `{ "id": 103, name: 'yh', 'date': '2022–07–06' }`;

其中的字符串不符合JSON格式(键值需要双引号),使用JSON.parse()解析会报错。

那么,有没有什么办法可以把这个字符串对象转换成可以解析的JSON呢?

很多人会想到正则匹配然后替换,或者使用eval等渣属性进行处理。

没必要这么麻烦, new Function 上线了,就完美了!

JS 代码如下所示:

console.log(JSON.stringify(new Function('return ' + str)()));
// The return result is: '{"id":10393,"name":"yh","date":"2022–07–06"}'

使用返回语法,你可以轻松地将任意字符串转换为其他 JavaScript数据类型。

2).模板字符串作为模板

比如Vue、React等现在都有自己的模板语法,比如{}语法。

如果我们想直接使用 ES6 自己的语法作为模板语言,就必须使用 new Function 的能力,比如下面的 HTML:

<template id="template">
${data.map(function (obj, index) {
return `<p>Article: ${obj.article}</p>
<p>Author: ${obj.author}</p>
`;
}).join('')}
</template>

我们可以扩展字符串并定义一个名为 interpolate 的字符串方法来将 ES6 语法字符串转换为可执行的 ES6 代码:

String.prototype.interpolate = function (params) {
const names = Object.keys(params);
const vals = Object.values(params);return new Function(…names,`return \`${this}\`;`)(…vals);
};

至此,只要有对应的数据,我们就可以根据<template>模板获取最终编译好的HTML字符串,例如:

const html = template.innerHTML.interpolate({
data: [{
article: 'Article title one',
author: 'y'
}, {
article: 'Article title two',
author: 'h'
}]
});
console.log(html);

可以看出,无需任何第三方模板渲染引擎,就能使用复杂语法下的模板渲染效果,原生JS爱好者欣喜若狂。

3).闭包和上下文

new Function 的 body 参数中变量的上下文是全局的,不是私有的,没有所谓的闭包。

例如,下面新函数代码中的值与主函数中的值无关:

function getFunc() {
let value = 'yh';
let func = new Function('console.log(value)');
return func;
}
getFunc()(); // error: value is not defined

如果是常规函数语法,没有问题:

function getFunc() {
let value = 'yh';
let func = function () {
console.log(value)
};
return func;
}
getFunc()(); // print 'yh'

4).其他

与 new Function 语法类似的是新的RegExp,它可以使用字符串作为正则表达式的内容,特别适合动态匹配,或者增加代码混淆(一些混淆工具可以对字符串进行混淆)。

例如,要匹配以动态值开头的属性值,可以使用以下用法:

let reg = new RegExp('^' + value, 'g');

总结

以上就是我今天跟你分享的关于new Function语法的知识,希望对你有所帮助,如果你觉得有用的话,请记得点赞我,关注我,并将其分享给你身边的朋友,也许能够帮助到他。

最后,感谢你的阅读,期待你的关注,我们一起快乐学编程。

责任编辑:庞桂玉 来源: web前端开发
相关推荐

2020-04-16 18:04:07

JavaScript前端技术

2019-03-11 14:33:21

Redis内存模型数据库

2017-01-20 08:30:19

JavaScriptfor循环

2018-06-22 13:05:02

前端JavaScript引擎

2010-09-28 09:14:36

HTML DOMJavascript

2012-02-06 13:52:33

JavaScript

2017-09-22 14:12:33

Android字体 Typeface

2023-07-13 14:44:52

new Date()构造函数开发

2010-01-06 17:18:54

Linux常用软件

2023-06-06 15:31:13

JavaScript开发

2010-07-13 09:36:25

2010-11-19 16:22:14

Oracle事务

2010-06-23 20:31:54

2009-08-25 16:27:10

Mscomm控件

2022-08-26 13:48:40

EPUBLinux

2020-09-21 09:53:04

FlexCSS开发

2019-11-07 15:20:07

JavaCollectorsteeing

2020-07-20 06:35:55

BashLinux

2022-09-23 15:01:33

图片加载代码

2019-11-29 16:21:22

Spring框架集成
点赞
收藏

51CTO技术栈公众号