ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。