ホームページ > ウェブフロントエンド > フロントエンドQ&A > JavaScriptファクトリー関数とは何ですか?

JavaScriptファクトリー関数とは何ですか?

WBOY
リリース: 2022-03-10 11:14:33
オリジナル
3313 人が閲覧しました

JavaScript では、ファクトリ関数はオブジェクトを作成するために使用される関数です。これらの組み込み関数はすべてクラス オブジェクトです。呼び出されると、クラス インスタンスが実際に作成されます。つまり、最初にクラスを使用してオブジェクトが作成され、その後オブジェクトが返されます。作成された関数はすべて同じ属性を持ちます。

JavaScriptファクトリー関数とは何ですか?

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript ファクトリ関数とは

それでは、「ファクトリ関数」とは正確には何でしょうか? 「いわゆるファクトリー関数とは、これらの組み込み関数がすべてクラス オブジェクトであることを意味します。これらを呼び出すと、実際にはクラス インスタンスが作成されます。」という概念を見てみましょう。これは、この関数を呼び出すと、実際にクラスを使用してオブジェクトを作成し、そのオブジェクトを返すことを意味します。 Javascript 自体は厳密なオブジェクト指向言語ではない (クラスを含まない) ため、実際には Javascript には厳密な「ファクトリー関数」はありませんが、JavaScript では関数を使用してクラスをシミュレートできます。

最初に new キーワードを使用してオブジェクトを作成します。obj は Object のインスタンスに相当します。クラスを通じてオブジェクトをインスタンス化し、そのオブジェクトに対応する属性を与え、最後にオブジェクトを返します。この関数を呼び出すことでオブジェクトを作成できますが、この場合のファクトリ関数は、実際には理解しやすいものです:

1、これは関数です。

2、オブジェクトの作成に使用されます。

3 工場のようなもので、「生成される」関数はすべて「標準部品」(同じ属性を持つ)です

関数とオブジェクトを学ばなければ JavaScript にはなれません プログラマーと を一緒に使用すると構成要素となるため、コンポジションと呼ばれる強力なオブジェクト パラダイムから始める必要があります。今日は、ファクトリ関数を使用して関数、オブジェクト、Promise を構成するための慣用的なパターンをいくつか見ていきます。結合モードでは、サブオブジェクトのバッチがツリー構造に編成され、トップレベルのコマンドはツリー内のすべてのオブジェクトを操作します。関数がオブジェクトを返すとき、それをファクトリ関数と呼びます。

簡単な例を見てみましょう。

function createJelly() {
 return {
 type: 'jelly',
 colour: 'red'
 scoops: 3
 };
 }
ログイン後にコピー

いくつかの例を通してそれを紹介しましょう。

このファクトリ関数を呼び出すたびに、新しいゼリー オブジェクト インスタンスが返されます。注意すべき重要な点は、ファクトリー関数名の前に create を付ける必要はありませんが、そうすることで関数の意図が他の人にとってより明確になるということです。同じことが type 属性にも当てはまりますが、一般に、これはプログラムのオブジェクトを区別するのに役立ちます。

1. パラメータ付きのファクトリ関数

すべての関数と同様に、パラメータを通じてファクトリ関数 (アイスクリーム アイスクリーム) を定義でき、返されたオブジェクトのモデルを変更するために使用できます。

function createIceCream(flavour='Vanilla') {
 return {
 type: 'icecream',
 scoops: 3,
 flavour
 }
 }
ログイン後にコピー

理論的には、何百ものパラメータを持つファクトリ関数を使用して、深くネストされたオブジェクトのエンボイを返すことができますが、後でわかるように、それは合成の本質ではまったくありません。

2. 結合ファクトリ関数

ファクトリ関数内に別のファクトリ関数を定義すると、複雑なファクトリ関数をより小さな再利用可能なフラグメントに分割するのに役立ちます。

たとえば、前のゼリー (jelly) およびアイスクリーム (アイスクリーム) ファクトリ関数によって定義されたデザート (デザート) ファクトリ関数を作成できます。

function createDessert() {
return {
type: 'dessert',
bowl: [
createJelly(),
createIceCream()
]
};
}
ログイン後にコピー

ファクトリ関数を組み合わせて任意の複雑なオブジェクトを構築できます。その場合、new や this を組み合わせて使用​​する必要はありません。オブジェクトは、is-a (is) の代わりに has-a (has) 関係で表すことができます。つまり、継承ではなく合成を使用して実装できます。

たとえば、継承を使用します。

// A trifle *is a* dessert 蛋糕*是*甜点
function Trifle() {
Dessert.apply(this, arguments);
}
Trifle.prototype = Dessert.prototype;
// 或者
class Trifle extends Dessert {
constructor() {
super();
}
}
ログイン後にコピー

組み合わせモードを使用して同じ意味を表現できます。

// A trifle *has* layers of jelly, custard and cream. It also *has a* topping.
// 蛋糕 *有* 果冻层,奶酪层和奶油层,顶部还 *有* 装饰配料。
function createTrifle() {
return {
type: 'trifle',
layers: [
createJelly(),
createCustard(),
createCream()
],
topping: createAlmonds()
};
}
ログイン後にコピー

3. 非同期ファクトリ関数

すべてのファクトリがすぐにデータを返すわけではありません。たとえば、最初にデータを取得する必要がある人もいます。このような場合、Promise を返してファクトリ関数を定義できます。

function getMeal(menuUrl) {
 return new Promise((resolve, reject) => {
 fetch(menuUrl)
 .then(result => {
 resolve({
 type: 'meal',
 courses: result.json()
 });
 })
 .catch(reject);
 });
 }
ログイン後にコピー

この深くネストされたインデントにより、非同期ファクトリーの読み取りとテストが困難になる可能性があります。多くの場合、次のように記述できるように、それらを複数の異なるファクトリーに分割すると便利です。

function getMeal(menuUrl) {
 return fetch(menuUrl)
 .then(result => result.json())
 .then(json => createMeal(json));
 }
 function createMeal(courses=[]) {
 return {
 type: 'meal',
 courses
 };
 }
ログイン後にコピー

もちろん、コールバック関数を使用することもできますが、ファクトリ関数を定義するために Promise を返す Promise.all のようなツールがすでにあります。

function getWeeksMeals() {
const menuUrl = 'jsfood.com/';
return Promise.all([
getMeal(`${menuUrl}/monday`),
getMeal(`${menuUrl}/tuesday`),
getMeal(`${menuUrl}/wednesday`),
getMeal(`${menuUrl}/thursday`),
getMeal(`${menuUrl}/friday`)
]);
}
ログイン後にコピー

命名規則として create の代わりに get を使用して、これらのファクトリーが非同期作業を実行し、Promise を返すことを示します。

関連する推奨事項: JavaScript 学習チュートリアル

以上がJavaScriptファクトリー関数とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート