JavaScript の new Function() と new function() の違い

JavaScript は確かに柔軟ですが、多少の混乱ももたらします。たとえば、関数やオブジェクトなどを作成するなど、同じことを行うのに複数の方法を使用できます。では、タイトルに挙げた 2 つの違いは何でしょうか?

---

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 オブジェクトです。つまり、(function () {}).constructor === Function は true を返します。

関連する知識ポイントは、new Function() を使用して非同期関数を作成する方法です。 MDN からの答えは次のとおりです。

// Since `AsyncFunction` is not a global object, we need to get it manually:
const AsyncFunction = (async function () {}).constructor;

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

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

---

これが役立つと思われた場合は、 ニュースレターの購読を検討してください Web 開発に関するさらに役立つ記事やツールをご覧ください。読んでいただきありがとうございます!

以上がJavaScript の new Function() と new function() の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。