Das Prototype Design Pattern in JavaScript ist ein Erstellungsmuster, mit dem Sie neue Objekte erstellen können, indem Sie ein vorhandenes Objekt (den „Prototyp“) klonen, anstatt sie von Grund auf neu zu erstellen ein Prototyp. Dieses Muster eignet sich besonders gut für JavaScript, da JavaScript selbst eine prototypbasierte Sprache ist und nützlich ist, wenn die Objekterstellung kostspielig ist oder wenn Sie ein Objekt erstellen möchten, das bestimmte Eigenschaften mit einem Basisprototyp teilt.

ES6-Klassen erleichtern das Verständnis der Struktur von Objekten. Die Verwendung von Extends vereinfacht die Vererbung, aber vor ES6 wurde Prototyp verwendet, um dies zu vererben und zu implementieren. Hier ist ein Blog, um dieses Konzept zu verstehen.

Ps: Im Prototype Design Pattern in JavaScript gibt es keine integrierte clone()-Methode wie in einigen anderen Sprachen (z. B. Java). Sie können jedoch manuell eine clone()-Methode in Ihrem Prototyp oder Ihrer Konstruktorfunktion implementieren, um eine ähnliche Funktionalität bereitzustellen.

Die Idee hinter dem Prototype-Muster ist:

1. Erstellen Sie ein Objekt, das als Prototyp (Blaupause) fungiert.
2. Verwenden Sie dieses Objekt, um neue Instanzen zu erstellen, indem Sie es entweder kopieren oder neue Instanzen mit dem Prototyp verknüpfen.

Schlüsselkonzepte des Prototypmusters

Prototyp: Ein Vorlagenobjekt, aus dem neue Objekte erstellt werden.
Klonen: Neue Objekte werden durch Kopieren des Prototyps erstellt.
Prototypenkette: Objekte können Verhalten an ihren Prototyp delegieren

Teil 1: Die Basisformklasse

class Shape {
  constructor(type = 'Generic Shape', color = 'White') {
    this.type = type;
    this.color = color;
  }

  getDetails() {
    return `Type: ${this.type}, Color: ${this.color}`;
  }

  // Clone method to create a new object with the same prototype
  clone() {
    return Object.create(this);  // Creates a new object that inherits from this prototype
  }
}

Erläuterung:

Zweck: Die Shape-Klasse fungiert als Basisklasse oder „Prototyp“, von dem bestimmte Formen wie Kreise oder Rechtecke erben können.

clone()-Methode: Dies ist ein wichtiger Teil des Prototypmusters. Anstatt eine neue Instanz einer Klasse von Grund auf zu erstellen, erstellen wir einen Klon der vorhandenen Instanz (oder „Prototyp“). In diesem Fall erstellt Object.create(this) ein neues Objekt, das denselben Prototyp wie die ursprüngliche Form hat.

Teil 2: Die Zirkelklasse

class Circle extends Shape {
  constructor(radius = 0, color = 'White') {
    super('Circle', color); // Calls the parent (Shape) constructor
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius * this.radius;
  }
}

Erläuterung:
Zweck: Die Circle-Klasse erweitert die Shape-Klasse und stellt einen bestimmten Formtyp dar.

Attribute:

• Radius: Der Radius des Kreises.
• Im Konstruktor ruft die Funktion super() den Konstruktor auf Formklasse, die „Kreis“ als Formtyp und Farbe übergibt.

getArea() Methode: Berechnet die Fläche des Kreises mithilfe der Formel π * Radius^2.

Teil 3: Die Rechteckklasse

class Rectangle extends Shape {
  constructor(width = 0, height = 0, color = 'White') {
    super('Rectangle', color);  // Calls the parent (Shape) constructor
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

Erläuterung:

Zweck: Die Klasse „Rechteck“ erweitert die Klasse „Form“ und stellt einen anderen spezifischen Formtyp dar (ein Rechteck).

• Wie die Circle-Klasse verwendet die Rechteck-Klasse super(), um den Shape-Konstruktor der übergeordneten Klasse aufzurufen und anzugeben, dass es sich um ein „Rechteck“ handelt.
• getArea()-Methode: Berechnet die Fläche des Rechtecks ​​mithilfe der Formel Breite * Höhe

Teil 4: Klonen und Verwenden des Prototyps

const circlePrototype = new Circle();  // Create prototype
const myCircle = circlePrototype.clone();  // Clone the prototype
myCircle.radius = 5;
myCircle.color = 'Red';

const rectanglePrototype = new Rectangle();  // Create prototype
const myRectangle = rectanglePrototype.clone();  // Clone the prototype
myRectangle.width = 10;
myRectangle.height = 5;
myRectangle.color = 'Blue';

Erläuterung:

Anstatt myCircle- und myRectangle-Objekte mit dem neuen Schlüsselwort von Grund auf zu erstellen, klonen wir hier Prototypen.

Klonvorgang:

• Zuerst erstellen wir Prototypinstanzen (circlePrototype undsquarePrototype).
• Dann klonen wir diese Prototypen mit der clone()-Methode, die neue Objekte erstellt, die vom Prototypobjekt erben.

Geklonte Instanzen ändern:

• Nach dem Klonen ändern wir die Eigenschaften (z. B. Radius, Breite, Höhe, Farbe) der geklonten Objekte (myCircle und myRectangle), um sie an unsere Bedürfnisse anzupassen.
• Dadurch können wir problemlos mehrere Objekte aus einem Basisprototyp erstellen und nur die erforderlichen Eigenschaften ändern.

Teil 5: Ausgabe

console.log(myCircle.getDetails()); // Output: Type: Circle, Color: Red
console.log(`Circle Area: ${myCircle.getArea()}`);  // Output: Circle Area: 78.54

console.log(myRectangle.getDetails()); // Output: Type: Rectangle, Color: Blue
console.log(`Rectangle Area: ${myRectangle.getArea()}`);  // Output: Rectangle Area: 50

Erläuterung:

• Wir verwenden die von der Shape-Klasse geerbte Methode getDetails(), um die Details (Typ und Farbe) von myCircle und myRectangle zu drucken.
• Wir verwenden auch die getArea()-Methoden (spezifisch für die Klassen „Circle“ und „Rechteck“), um die Fläche jeder Form zu berechnen und anzuzeigen.

Perspektive des Prototyp-Entwurfsmusters:

• Prototyp-Erstellung: Anstatt neue Objekte von Kreis und Rechteck von Grund auf zu erstellen, erstellen wir zunächst eine Prototyp-Instanz (circlePrototype und rechteckPrototype).
• Klonen: Sobald der Prototyp existiert, wird die clone()-Methode verwendet, um neue Objekte basierend auf dem Prototyp zu erstellen. Dies ist die Essenz des Prototypmusters: Erstellen von Objekten durch Kopieren eines vorhandenen Objekts (des Prototyps).

Anwendungsfall:

Das Prototype-Muster ist nützlich, wenn:

• Sie müssen neue Objekte erstellen, indem Sie vorhandene Objekte klonen.
• Sie möchten Unterklassen vermeiden und vorhandene Objekte direkt als Blaupausen wiederverwenden.
• Die Erstellung ist kostspielig oder komplex und es müssen viele ähnliche Objekte erstellt werden. Durch die Verwendung von Prototypen können Sie den Prozess rationalisieren und die Effizienz verbessern.

Wenn Sie es bis hierher geschafft haben ?✨, hinterlassen Sie unten einen Kommentar mit Fragen oder Gedanken. Ich würde gerne von Ihnen hören und mich an tollen Diskussionen beteiligen!✨