Der Prototype Design Pattern in JavaScript

Der "Prototype Design Pattern" in JavaScript ermöglicht das Erzeugen von Klonen von Objekten, die in verschiedenen Teilen einer Anwendung verwendet werden können, ohne die aufwändige Erstellung jedes Mal zu wiederholen. Wir zeigen Ihnen die Grundlagen.

Das Konzept des Prototype Design Patterns

Der Prototype Design Pattern ist ein wichtiges Konzept in JavaScript, das auf dem Prinzip des prototypischen Vererbens basiert. Viele JavaScript-Entwickler sind entweder auf das Schlüsselwort "prototype" gestoßen, haben sich über die prototypische Vererbung gewundert oder Prototypen in ihrem Code implementiert. Dieses Muster nutzt das JavaScript-Prototypenmodell, um in leistungsintensiven Situationen Objekte zu erstellen.

Die erstellten Objekte sind Klone (flache Klone) des Originalobjekts, die weitergegeben werden können. Ein Anwendungsfall des Prototype-Musters besteht darin, aufwändige Datenbankoperationen zur Erstellung eines Objekts für andere Teile der Anwendung zu vermeiden. Anstatt dieselbe aufwändige Operation erneut durchzuführen, kann es vorteilhaft sein, das zuvor erstellte Objekt zu klonen.

Verwendung des Prototype-Musters

Um ein Objekt zu klonen, muss ein Konstruktor vorhanden sein, um das erste Objekt zu instanziieren. Anschließend werden mithilfe des Schlüsselworts "prototype" Variablen und Methoden an die Struktur des Objekts gebunden. Hier ist ein einfaches Beispiel:

var TeslaModelS = function() {
    this.numWheels    = 4;
    this.manufacturer = 'Tesla';
    this.make         = 'Model S';
}

TeslaModelS.prototype.go = function() {
    // Räder drehen
}

TeslaModelS.prototype.stop = function() {
    // Bremsbeläge anwenden
}

Der Konstruktor ermöglicht die Erstellung eines einzelnen TeslaModelS-Objekts. Wenn ein neues TeslaModelS-Objekt erstellt wird, behält es die im Konstruktor initialisierten Zustände bei. Das Hinzufügen von Funktionen wie "go" und "stop" ist einfach, da wir sie mit "prototype" deklariert haben.

Eine alternative Methode zur Erweiterung von Funktionen im Prototype lautet wie folgt:

var TeslaModelS = function() {
    this.numWheels    = 4;
    this.manufacturer = 'Tesla';
    this.make         = 'Model S';
}

TeslaModelS.prototype = {
    go: function() {
    // Räder drehen
    },
    stop: function() {
    // Bremsbeläge anwenden
    }
}

Das Revealing Prototype Pattern

Ähnlich dem Modulmuster gibt es auch eine Variante des Prototype-Musters, das als "Revealing Prototype Pattern" bezeichnet wird. Diese Variante ermöglicht die Kapselung von öffentlichen und privaten Mitgliedern, da sie ein Objektliteral zurückgibt.

Durch die Rückgabe eines Objekts wird der Prototypen-Objektname mit einer Funktion versehen. So können wir steuern, was im aktuellen Prototypen freigegeben werden soll, um den Zugriff zu regeln:

var TeslaModelS = function() {
    this.numWheels    = 4;
    this.manufacturer = 'Tesla';
    this.make         = 'Model S';
}

TeslaModelS.prototype = function() {

    var go = function() {
    // Räder drehen
    };

    var stop = function() {
    // Bremsbeläge anwenden
    };

    return {
    pressBrakePedal: stop,
    pressGasPedal: go
    }

}();

Achten Sie darauf, dass die Funktionen "stop" und "go" vor dem zurückgegebenen Objekt geschützt sind, da sie außerhalb des Bereichs des zurückgegebenen Objekts liegen. Da JavaScript die prototypische Vererbung nativ unterstützt, müssen keine grundlegenden Funktionen neu geschrieben werden.

Der Prototype Design Pattern ist ein leistungsstarkes Konzept, das die effiziente Erstellung von Objekten in JavaScript ermöglicht und die Wiederverwendung von Objekten in komplexen Anwendungen erleichtert.