【早阅】JavaScript中的new Function()和new function()有什么区别？

作者：@Zachary Lee
原文：https://webdeveloper.beehiiv.com/p/difference-new-function-new-function-javascript

背景

JavaScript 作为一种灵活的编程语言，提供了多种创建函数和对象的方法。本文主要探讨了两种特定的创建函数的方式：new Function 和 new function()，并解释了它们之间的区别和应用场景。

要点

• new Function 是一种动态创建函数的方式，通过传入参数和函数体字符串来生成函数。

• new function() 用于创建一个新的对象，并使用匿名函数作为构造函数。

分析

1. new Function 的用法：

• 语法：const func = new Function ([arg1, arg2, ...argN], functionBody);

• 示例：const sum = new Function('a', 'b', 'return a + b'); sum(1, 2); // 3

• 特点：new Function 创建的函数总是在全局作用域中运行，只能访问全局变量和自身的局部变量。

• 示例：const a = new (function () { this.name = 1; })(); console.log(a); // { name: 1 }

• 特点：这种方式创建的对象会调用匿名函数作为构造函数，初始化对象的属性。

• 示例代码展示了 new Function 和普通函数在作用域上的差异：

   globalThis.a = 10;
   function createFunction1() {
     const a = 20;
     return new Function('return a;');
   }
   function createFunction2() {
     const a = 20;
     function f() {
       return a;
     }
     return f;
   }
   const f1 = createFunction1();
   console.log(f1()); // 10
   const f2 = createFunction2();
   console.log(f2()); // 20

• new Function 创建的函数访问的是全局变量 a，而普通函数访问的是局部变量 a。

影响

• 灵活性：new Function 提供了动态创建函数的灵活性，适用于需要动态编译模板或从服务器接收代码字符串的场景。

• 安全性：由于 new Function 在全局作用域中运行，需要注意潜在的安全风险，特别是在处理不可信的输入时。

• 性能：动态创建函数可能会影响性能，因为每次调用 new Function 都会重新解析和编译函数体。

结论

new Function 和 new function() 在 JavaScript 中提供了不同的创建函数和对象的方式，各有其特定的应用场景。了解它们之间的区别和特点，有助于开发者更有效地利用 JavaScript 的灵活性，同时注意潜在的安全和性能问题。未来，随着 JavaScript 的发展，这些特性可能会得到进一步的优化和改进。

早阅：了解技术资讯的一种方式。