ホームページ >ウェブフロントエンド >jsチュートリアル >クイックヒント:JavaScriptの工場機能とは何ですか

クイックヒント:JavaScriptの工場機能とは何ですか

Lisa Kudrow
Lisa Kudrowオリジナル
2025-02-17 10:54:13691ブラウズ

Quick Tip: What Are Factory Functions in JavaScript

JavaScript Factory関数:オブジェクトを構成するための強力なパターンを構築します

JavaScript Factory関数は、オブジェクトを返す関数であり、newまたはキーワードを使用せずに複数の類似のオブジェクトを作成できます。この記事では、パラメトリック工場関数、構成可能な工場関数、非同期工場機能、高度な工場関数など、工場機能のいくつかの用途を調べて、それらを使用してより柔軟で容易なJavaScriptコードを維持する方法を示します。 this

コアコンセプト

  • 工場関数:オブジェクトの関数を返します。
  • パラメーター化された工場関数:オブジェクト構造を返す工場関数を変更するパラメーターを受け入れます。
  • コンポジットファクトリ機能:他の工場関数を組み合わせることにより、複雑なオブジェクトのファクトリ関数を構築します。
  • 非同期工場関数:非同期操作を処理するという約束の工場関数を返します。
  • 高度な工場関数:ファクトリ関数は関数パラメーターとして渡され、エンハンサーの作成に使用されます(たとえば、タイムスタンプを追加したり、不変のオブジェクトを作成したりします)。

簡単な例

単純な工場関数:

<code class="language-javascript">function createJelly() {
  return {
    type: 'jelly',
    colour: 'red',
    scoops: 3
  };
}</code>

関数が呼び出されるたびに、新しいゼリーオブジェクトインスタンスが返されます。 関数名は必ずしもcreateJelly()で始まるわけではありませんが、そうすることでコードの読みやすさを改善することができます。 create

パラメーター化ファクトリ関数

すべての関数と同様に、工場関数は、返されたオブジェクトの構造を変更するパラメーターを受け入れることもできます。

理論的には、多数のパラメーターを使用して非常に特定のネストされたオブジェクトを作成できますが、これは組み合わせのアイデアに適合しません。
<code class="language-javascript">function createIceCream(flavour = 'Vanilla') {
  return {
    type: 'icecream',
    scoops: 3,
    flavour
  };
}</code>

コンポジットファクトリ機能

1つの工場関数を別の複雑な工場関数の組み合わせとして定義することにより、より小さな、より再利用可能なフラグメントに分解できます。たとえば、以前のゼリーおよびアイスクリーム工場の機能に基づいて、デザートファクトリー機能を作成できます。

工場関数を組み合わせることで、

または

を使用せずに複雑な構造を構築できます。
<code class="language-javascript">function createDessert() {
  return {
    type: 'dessert',
    bowl: [
      createJelly(),
      createIceCream()
    ]
  };
}</code>

newコンビネーションvs.継承this

組み合わせは「has-a」の関係にもっと傾く傾向がありますが、継承は「is-a」の関係に傾く傾向があります。たとえば、継承でtrifleを実装してください:

そして、組み合わせを使用してtrifleを実装します:

<code class="language-javascript">// Trifle is a Dessert
function Trifle() {
  Dessert.apply(this, arguments);
}
Trifle.prototype = Dessert.prototype;
// 或使用 ES6 class
class Trifle extends Dessert {}</code>

Async Factory関数

<code class="language-javascript">// Trifle has layers of jelly, custard and cream. It also has a topping.
function createTrifle() {
  return {
    type: 'trifle',
    layers: [
      createJelly(),
      createCustard(),
      createCream()
    ],
    topping: createAlmonds()
  };
}</code>

すべての工場の関数がすぐにデータを返すことができるわけではありません。一部の工場関数は、最初にデータを取得する必要がある場合があります。これらの場合、約束を返す工場関数を使用できます。 深い巣を避けるために、非同期の工場関数は複数の独立した工場関数に分解してから組み合わせることができます。

を使用して、約束を返す複数の工場関数を組み合わせることができます。
<code class="language-javascript">function getMeal(menuUrl) {
  return new Promise((resolve, reject) => {
    fetch(menuUrl)
      .then(result => {
        resolve({
          type: 'meal',
          courses: result.json()
        });
      })
      .catch(reject);
  });
}</code>

関数と方法
<code class="language-javascript">function getMeal(menuUrl) {
  return fetch(menuUrl)
    .then(result => result.json())
    .then(json => createMeal(json));
}

function createMeal(courses = []) {
  return {
    type: 'meal',
    courses
  };
}</code>

工場関数は通常、メソッドを含むオブジェクトを返さないでください。これにより、データと計算が一緒に混ざり合っています。 ファクトリ関数はデータオブジェクトの作成に焦点を当て、データの操作のロジックは独立した関数によって処理されます。

高度な工場関数

高次関数が強力な制御を達成できるため、

工場機能を渡すことができます。たとえば、高度な工場関数を使用してエンハンサーを作成できます。

<code class="language-javascript">function createJelly() {
  return {
    type: 'jelly',
    colour: 'red',
    scoops: 3
  };
}</code>
このエンハンサーは、既存の工場関数を採用し、タイムスタンプを含むインスタンスを返す工場関数に包みます。

結論

工場関数は、継承よりも組成の使用を促進するシンプルで強力なパターンであり、コードをより柔軟でテストし、維持しやすくなります。 単純なビルディングブロックを使用することにより、コードを理解し、維持しやすくすることができます。

(以下はFAQパーツであり、元のテキストに従って書き直されたものであり、同様の問題が合理化され、合併されました)

faq(faq)

  • 工場関数とコンストラクターの違いは? Factory関数は、キーワードを使用せずにオブジェクトを直接返します。工場の機能はより柔軟で、機能的なプログラミングスタイルに沿っています。 new new this

  • 工場関数にプライベート変数を作成する方法は?
  • 閉鎖を使用します。プライベート変数は工場関数内で宣言され、工場関数によって返されるオブジェクト内のメソッドを介してのみアクセスできます。

  • 工場関数はES6矢印関数で使用できますか?
  • はい。

  • 工場関数にメソッドを追加する方法は?
  • 工場関数によって返されるオブジェクトにメソッドを定義します。

  • 工場関数は他の工場関数を継承できますか?
  • 複数のオブジェクトプロパティを

    と組み合わせるか、オペレーターを展開して継承をシミュレートできます。 Object.assign

  • 工場の閉鎖はどのような役割を果たしますか?
  • 閉鎖は、データのカプセル化を実装し、プライベート変数とメソッドを作成します。

  • 工場関数は他の機能を返すことができますか?
  • はい、これは多くの場合、高次関数を作成するために使用されます。

  • JavaScriptモジュールで工場関数を使用する方法は?
  • 工場関数をエクスポートしてから、他のモジュールでインポートして使用します。

以上がクイックヒント:JavaScriptの工場機能とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。