Was ist eine JavaScript-Factory-Funktion?

In JavaScript ist eine Factory-Funktion eine Funktion, die zum Erstellen von Objekten verwendet wird. Diese integrierten Funktionen sind alle Klassenobjekte. Wenn sie aufgerufen werden, wird tatsächlich eine Klasseninstanz erstellt, das heißt, ein Objekt wird zuerst mit der Klasse erstellt und dann wird das Objekt zurückgegeben.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Was ist eine JavaScript-Factory-Funktion?

Was genau ist also eine „Factory-Funktion“? Werfen wir einen Blick auf das Konzept: „Die sogenannte Factory-Funktion bedeutet, dass diese integrierten Funktionen alle Klassenobjekte sind. Wenn Sie sie aufrufen, erstellen Sie tatsächlich eine Klasseninstanz.“ Das heißt, wenn ich diese Funktion aufrufe, erstelle ich tatsächlich ein Objekt mithilfe der Klasse und gebe das Objekt dann zurück. Da Javascript selbst keine strikte objektorientierte Sprache ist (keine Klassen enthält), verfügt Javascript tatsächlich nicht über eine strikte „Fabrikfunktion“, aber in Javascript können wir Funktionen zum Simulieren von Klassen verwenden.

Wir erstellen zunächst ein Objekt über das Schlüsselwort new, und obj entspricht einer Instanz von Object. Wir instanziieren ein Objekt über die Klasse, geben dem Objekt dann entsprechende Attribute und geben schließlich das Objekt zurück. Wir können Objekte erstellen, indem wir diese Funktion aufrufen. In diesem Fall ist die Factory-Funktion tatsächlich leicht zu verstehen:

1, es ist eine Funktion.

2, das zum Erstellen von Objekten verwendet wird.

3. Es ist wie eine Fabrik. Die „produzierten“ Funktionen sind alle „Standardteile“ (haben die gleichen Eigenschaften).

Sie können kein JavaScript-Programmierer werden, ohne Funktionen und Objekte zu lernen und sie zusammen zu verwenden Um Bausteine ​​zu bauen, müssen wir mit einem leistungsstarken Objektparadigma namens Komposition beginnen. Heute betrachten wir einige idiomatische Muster für die Verwendung von Fabrikfunktionen zum Erstellen von Funktionen, Objekten und Versprechen. Der Kombinationsmodus organisiert eine Reihe von Unterobjekten in einer Baumstruktur, und ein Befehl der obersten Ebene bedient alle Objekte im Baum. Wenn eine Funktion ein Objekt zurückgibt, nennen wir es eine Factory-Funktion.

Schauen wir uns ein einfaches Beispiel an.

function createJelly() {
 return {
 type: 'jelly',
 colour: 'red'
 scoops: 3
 };
 }

Lass es uns anhand einiger Beispiele vorstellen.

Jedes Mal, wenn wir diese Factory-Funktion aufrufen, wird eine neue Jelly-Objektinstanz zurückgegeben. Es ist wichtig zu beachten, dass wir dem Factory-Funktionsnamen nicht create voranstellen müssen, aber es macht die Absicht der Funktion für andere klarer. Das Gleiche gilt für das Typattribut, aber im Allgemeinen hilft es uns, zwischen den Objekten unseres Programms zu unterscheiden.​

1. Factory-Funktion mit Parametern

Wie alle Funktionen können wir unsere Factory-Funktion (Eiscreme) über Parameter definieren, mit denen sich das Modell des zurückgegebenen Objekts ändern lässt.

function createIceCream(flavour='Vanilla') {
 return {
 type: 'icecream',
 scoops: 3,
 flavour
 }
 }

Theoretisch könnten Sie Factory-Funktionen mit Hunderten von Argumenten verwenden, um sehr viele tief verschachtelte Objekte zurückzugeben, aber wie wir sehen werden, ist das überhaupt nicht das Wesentliche der Komposition.

2. Kombinierte Factory-Funktion

Die Definition einer weiteren Factory-Funktion innerhalb einer Factory-Funktion kann uns dabei helfen, komplexe Factory-Funktionen in kleinere, wiederverwendbare Fragmente aufzuteilen.

Zum Beispiel können wir eine Dessert-(Dessert-)Fabrikfunktion erstellen, die durch die vorherigen Gelee-(Gelee-) und Eiscreme-(Eiscreme-)Fabrikfunktionen definiert wird.​

function createDessert() {
return {
type: 'dessert',
bowl: [
createJelly(),
createIceCream()
]
};
}

​ Wir können Factory-Funktionen kombinieren, um beliebig komplexe Objekte zu erstellen, was nicht erfordert, dass wir new oder this in Kombination verwenden. Objekte können durch eine has-a (has)-Beziehung anstelle einer is-a (is)-Beziehung dargestellt werden. Mit anderen Worten: Es kann durch Komposition statt durch Vererbung implementiert werden. ​​​

​Zum Beispiel durch Vererbung.

// A trifle *is a* dessert 蛋糕*是*甜点
function Trifle() {
Dessert.apply(this, arguments);
}
Trifle.prototype = Dessert.prototype;
// 或者
class Trifle extends Dessert {
constructor() {
super();
}
}

Dieselbe Bedeutung können wir im Kombinationsmodus ausdrücken.

// 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. Asynchrone Fabrikfunktionen

Nicht alle Fabriken geben Daten sofort zurück. Manche müssen sich zum Beispiel erst die Daten besorgen. In diesen Fällen können wir Promises zurückgeben, um Factory-Funktionen zu definieren.

function getMeal(menuUrl) {
 return new Promise((resolve, reject) => {
 fetch(menuUrl)
 .then(result => {
 resolve({
 type: 'meal',
 courses: result.json()
 });
 })
 .catch(reject);
 });
 }

Diese tief verschachtelte Einrückung kann das Lesen und Testen asynchroner Fabriken erschweren. Es ist oft hilfreich, sie in mehrere verschiedene Fabriken aufzuteilen, die wie folgt geschrieben werden können.

function getMeal(menuUrl) {
 return fetch(menuUrl)
 .then(result => result.json())
 .then(json => createMeal(json));
 }
 function createMeal(courses=[]) {
 return {
 type: 'meal',
 courses
 };
 }

Natürlich können wir Rückruffunktionen verwenden, aber wir haben bereits Tools wie Promise.all, die Versprechen zurückgeben, um Factory-Funktionen zu definieren.​

function getWeeksMeals() {
const menuUrl = 'jsfood.com/';
return Promise.all([
getMeal(`${menuUrl}/monday`),
getMeal(`${menuUrl}/tuesday`),
getMeal(`${menuUrl}/wednesday`),
getMeal(`${menuUrl}/thursday`),
getMeal(`${menuUrl}/friday`)
]);
}

​ Wir verwenden „get“ statt „create“ als Namenskonvention, um zu zeigen, dass diese Fabriken asynchrone Arbeit leisten und Versprechen zurückgeben.

Verwandte Empfehlungen: Javascript-Lern-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist eine JavaScript-Factory-Funktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!