新人求关注，点击右上角 ↗ 关注，博主日更，全年无休，您的关注是我的更新的动力～ 感谢大家了

JavaScript 确实很灵活，但这种灵活性也带来了一些困惑。例如，你可以用多种方式来做同一件事，比如创建函数、对象等等。那么，new Function() 和 new function() 两者有什么区别呢？

new Function()

new Function 是另一种创建函数的方法，其语法如下：

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

一个简单的例子：

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

这确实提供了极大的灵活性。虽然不常见，但在某些情况下可以使用。例如，当我们需要将模板动态编译为函数时可以使用这一方法，据我所知，Vue.js 就是这样做的。除此之外，当我们需要从服务器接收代码字符串并动态创建函数时，也可以使用它。

我们快速讨论一下它的特性。看看下面的代码会输出什么？

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()); // ?
const f2 = createFunction2();
console.log(f2()); // ?

答案是 10 和 20。和你想的是不是一样的。

解释一下这是为什么，这是因为 new Function 总是在全局作用域中创建函数。在执行时，只能访问全局变量和它们自身的局部变量。

new function()

让我们来看看 new function()， new function() 是用来创建一个新的对象并应用匿名函数作为构造函数的。

例如下面的例子：

const a = new (function () {
  this.name = 1;
})();

console.log(a); // { name: 1 }

就是这样。实际上，每一个 JavaScript 函数都是一个 Function 对象，换句话说：

(function () {}).constructor === Function 返回 true。

这里引入一个深入的面试考点问题，就是如何使用 new Function() 创建一个异步函数？

从 MDN 上的文档，我们可以得出以下答案：

// 因为 `AsyncFunction` 不是一个全局对象，所以我们需要手动获取它：
const AsyncFunction = (async function () {}).constructor;

const fetchURL = new AsyncFunction('url', 'return await fetch(url);');

fetchURL('/')
  .then((res) => res.text())
  .then(console.log);

是不是感叹还有这种操作，我只想说在 js 中总有让你颠覆三观的实践

小结

欢迎留言评论，大家一起探讨，一起进步～ 欢迎点赞、关注、转发～

求关注～全年无休日更~ 求关注～