Разница между new Function() и new function() в JavaScript

JavaScript действительно гибкий, но он также вносит некоторую путаницу. Например, вы можете использовать несколько способов выполнения одной и той же задачи, таких как создание функций, объектов и т.д. Так в чем же разница между двумя упомянутыми в названии способами?

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() предназначена для создания нового объекта и применения анонимной функции в качестве конструктора. Например, как здесь:

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

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

Вот и все. На самом деле, каждая функция JavaScript является функциональным объектом, другими словами, (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);