JavaScript 的 “new Function”：你不知道

一、什么是 new Function()？

new Function() 是 JavaScript 内置的构造函数，用于创建一个新的函数对象。它的语法如下：

new Function ([arg1, arg2, ..., argN], functionBody)

• arg1, arg2, ..., argN: 可选参数，表示函数的参数列表，以字符串形式传递。
• functionBody: 必选参数，表示函数的函数体，也以字符串形式传递。

示例：

// 创建一个接受两个参数并返回它们之和的函数
const add = new Function('a', 'b', 'return a + b;');

// 调用该函数
console.log(add(2, 3)); // 输出: 5

二、new Function() 的强大之处：

1. 动态代码生成： 这是 new Function() 最核心的优势。你可以根据运行时的数据动态地生成函数，这在某些场景下非常有用。

   function createMultiplier(factor) {
     return new Function('x', 'return x * ' + factor + ';');
   }
   
   const double = createMultiplier(2);
   const triple = createMultiplier(3);
   
   console.log(double(5));  // 输出: 10
   console.log(triple(5));  // 输出: 15
   

2. 沙箱环境： new Function() 创建的函数在全局作用域中执行，但它拥有自己的局部作用域。这意味着它可以访问全局变量，但不能访问创建它的上下文的变量。这可以用来创建简单的沙箱环境，隔离代码。

   let secret = "This is a secret!";
   
   function createRevealer() {
     // 尝试访问外部的 secret 变量
     return new Function('return secret;'); // 无法访问外部的 secret
   }
   
   const revealer = createRevealer();
   
   try {
     console.log(revealer()); // 报错: secret is not defined
   } catch (error) {
     console.error(error);
   }
   

3. 模板引擎： new Function() 可以作为简易的模板引擎使用，将数据动态地插入到 HTML 模板中。

   function compileTemplate(template) {
     return new Function('obj', 'return `' + template + '`;');
   }
   
   const template = "<h1>Hello, ${obj.name}!</h1>";
   const compiledTemplate = compileTemplate(template);
   
   const data = { name: "World" };
   const html = compiledTemplate(data);
   
   console.log(html); // 输出: <h1>Hello, World!</h1>
   

三、new Function() 的风险与注意事项：

1. 安全风险： 如果 functionBody 的内容来自用户输入，那么 new Function() 可能会导致代码注入漏洞。恶意用户可以通过注入恶意代码来执行任意操作。因此，绝对不要将用户输入直接传递给 new Function()。
2. 性能问题： new Function() 会在运行时编译代码，这比预编译的函数要慢得多。频繁使用 new Function() 可能会影响性能。
3. 调试困难： 动态生成的代码难以调试，因为调试器可能无法正确地跟踪代码的执行。
4. 可读性差： 使用 new Function() 会使代码更难阅读和理解，因为它将代码逻辑隐藏在字符串中。