ホームページ >ウェブフロントエンド >jsチュートリアル >クイックヒント:JavaScriptの工場機能とは何ですか
JavaScript Factory関数:オブジェクトを構成するための強力なパターンを構築します
JavaScript Factory関数は、オブジェクトを返す関数であり、new
または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
と組み合わせるか、オペレーターを展開して継承をシミュレートできます。
Object.assign
以上がクイックヒント:JavaScriptの工場機能とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。