Detaillierte Erläuterung des Konstruktormusters von JS-Entwurfsmustern

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung des Konstruktormusters von JS. Was sind die Vorsichtsmaßnahmen bei der Verwendung des JS-Konstruktormusters? Im Folgenden werfen wir einen Blick auf praktische Fälle. Konzept

Der Konstruktor wird zum Erstellen eines bestimmten Objekttyps verwendet. Wir deklarieren nicht nur das verwendete Objekt, der Konstruktor kann auch Parameter akzeptieren, um die Mitgliedswerte des Objekts festzulegen, wenn es vorhanden ist zuerst erstellt. Sie können auch

Eigenschaften und Methoden
von benutzerdefinierten Typobjekten deklarieren. Funktion und Hinweise

wird zum Erstellen bestimmter Objekttypen verwendet.

Weisen Sie dem Objekt einen Wert zu, wenn Sie es zum ersten Mal deklarieren

Sie können Parameter übergeben, den Konstruktor selbst deklarieren und Attribute und Methoden zuweisen

Hinweise:

Achten Sie auf die Verwendung von new

, um es von einem Singleton zu unterscheiden.

Grundlegende Verwendung

In

JavaScript
wird normalerweise der Konstruktor berücksichtigt Es wird verwendet, um Instanzen zu implementieren, und JavaScript verwendet nicht das Konzept einer Klasse, sondern einen speziellen Konstruktor. Durch die Verwendung der neuen Operation können wir JavaScript mitteilen, dass wir ein neues Objekt erstellen möchten und die Mitglieder des neuen Objekts alle im Konstruktor definiert sind. Im Konstruktor verweist dies auf das neu erstellte Objekt. Die grundlegende Syntax lautet wie folgt:

Dies ist der einfachste Weg, eine Funktion zu erstellen, aber haben wir beim Erben ein Problem festgestellt? Scheint zu mühsam zu sein, daher können wir die Ausgabemethode über den Prototyp zum erstellten Objekt hinzufügen. Schauen Sie sich den folgenden Code an

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name;    this.output= function () {
        return this.name + ":" + this.year +"年"+ this.month+"月";
    };
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());1234567891011121314

Auf diese Weise kann die ausgegebene Einzelinstanz in der PersonBir-Objektinstanz zur gemeinsamen Nutzung verwendet werden Bei der Benennung des Konstruktors schreiben wir den Funktionsnamen groß, um die Unterscheidung gewöhnlicher Funktionen zu erleichtern.

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name；
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());123456789101112

Die Verwendung des neuen Operators erzwingen

Für die Verwendung des neuen Operators im Konstruktor schauen wir uns den folgenden Code an. Wir können die Verwendung des neuen Operators erzwingen, indem wir beurteilen, ob dies der Fall ist Wert ist PersonBir, um den Zweck zu erreichen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

function PersonBir(name, year, month) {
    //核心代码，如果为假，就创建一个新的实例返回。
    if(!(this instanceof PersonBir)){        return new PersonBir(name, year, month);
    }    this.month = month;    this.year = year;    this.name = name；
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());

Empfohlene Lektüre:

js-Designmuster – die Verwendung von Singleton-Mustern

Warum sollte das Frontend Modularität verwenden?

Lösungen für häufige CSS-Kompatibilitätsprobleme

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Konstruktormusters von JS-Entwurfsmustern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!