javascript|广州蓝景前端—你需要深入了解一下JavaScript的new Functio 广州市

随着现代互联网IT发展趋势，各编程语言也在不断发展，每种语言都会通过新功能变得更强大，让前端开发人员编写更加简洁方便。

其中， 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 语法的微妙之处。
01).无效的 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数据类型。
02).模板字符串作为模板
比如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爱好者欣喜若狂。
03).闭包和上下文
【javascript|广州蓝景前端—你需要深入了解一下JavaScript的new Functio】new Function 的 body 参数中变量的上下文是全局的，不是私有的，没有所谓的闭包。
例如，下面新函数代码中的值与主函数中的值无关：