深入理解JavaScript中的new Function构造函数

前言

随着前端开发技术的持续演进，JavaScript已成为核心语言。对于从事前端或JavaScript开发的工程师而言，深入理解“new Function”这一机制至关重要，它是掌握高级JS特性的关键一环。

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>

我们可以扩展String原型，定义一个名为interpolate的字符串方法，将包含ES6语法的字符串转换为可执行的代码：

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

这样，只要提供对应的数据对象，即可根据模板生成结果。

到此这篇关于简单了解JavaScript中的new Function的文章就介绍到这了,更多相关JS new Function内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！