Vertiefendes Verständnis der JavaScript-Reihe (26): Detaillierte Erläuterung des Konstruktormusters von Designmustern_Javascript-Fähigkeiten-js-Tutorial-php.cn

Vertiefendes Verständnis der JavaScript-Reihe (26): Detaillierte Erläuterung des Konstruktormusters von Designmustern_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:11:28

Original

792 Leute haben es durchsucht

Einführung

Jeder ist mit Konstruktoren vertraut, aber wenn Sie ein Anfänger sind, müssen Sie dennoch verstehen, was ein Konstruktor ist. Ein Konstruktor wird zum Erstellen eines Objekts eines bestimmten Typs verwendet. Er deklariert nicht nur das zu verwendende Objekt, sondern der Konstruktor kann auch Parameter akzeptieren, um die Elementwerte des Objekts festzulegen, wenn das Objekt zum ersten Mal erstellt wird. Sie können Ihren eigenen Konstruktor anpassen und darin Eigenschaften oder Methoden benutzerdefinierter Objekttypen deklarieren.

Grundlegende Verwendung

In JavaScript werden Konstruktoren normalerweise zum Implementieren von Instanzen verwendet. JavaScript verfügt nicht über das Konzept von Klassen, es gibt jedoch spezielle Konstruktoren. Indem Sie die definierte Funktion mit dem Schlüsselwort new aufrufen, können Sie JavaScript mitteilen, dass Sie ein neues Objekt erstellen möchten, und die Memberdeklarationen des neuen Objekts werden alle im Konstruktor definiert. Innerhalb des Konstruktors verweist das Schlüsselwort this auf das neu erstellte Objekt. Die grundlegende Verwendung ist wie folgt:

Code kopieren Der Code lautet wie folgt:

Funktion Auto (Modell, Jahr, Meilen) {
This.model = model;
This.year = Jahr;
This.miles = Meilen;
This.output= function () {
return this.model „Gone“ this.miles „Kilometers“;
};
}

var tom= neues Auto("Onkel", 2009, 20000);
var dudu= neues Auto("Dudu", 2010, 5000);

console.log(tom.output());
console.log(dudu.output());

Das obige Beispiel ist ein sehr einfaches Konstruktormuster, es gibt jedoch einige Probleme. Erstens ist die Verwendung der Vererbung sehr mühsam. Zweitens wird die Ausgabe () jedes Mal neu definiert, wenn ein Objekt erstellt wird. Der beste Weg besteht darin, alle Instanzen des Typs „Auto“ diese Methode „Ausgabe“ gemeinsam nutzen zu lassen Anzahl der Instanzen Wenn ja, wird viel Speicher gespart.

Um dieses Problem zu lösen, können wir die folgenden Methoden verwenden:

Code kopieren Der Code lautet wie folgt:

Funktion Auto (Modell, Jahr, Meilen) {
This.model = model;
This.year = Jahr;
This.miles = Meilen;
This.output= formatCar;
}

Funktion formatCar() {
Geben Sie this.model „Gone“ und this.miles „Kilometers“ zurück;
}

Obwohl diese Methode verfügbar ist, haben wir eine bessere Methode wie folgt.

Konstrukteur und Prototyp

Die Funktion in JavaScript verfügt über ein Prototypattribut namens „Prototyp“. Wenn ein Konstruktor zum Erstellen eines Objekts aufgerufen wird, sind alle Attribute des Konstruktorprototyps für das neu erstellte Objekt verfügbar. Demnach können mehrere Car-Objektinstanzen denselben Prototyp teilen. Erweitern wir den Code des obigen Beispiels:

Code kopieren Der Code lautet wie folgt:

Funktion Auto (Modell, Jahr, Meilen) {
This.model = model;
This.year = Jahr;
This.miles = Meilen;
}

/*
Hinweis: Hier verwenden wir den Methodennamen Object.prototype anstelle von Object.prototype
Wird hauptsächlich verwendet, um ein Umschreiben des definierten Prototyp-Prototypobjekts zu vermeiden
*/
Car.prototype.output= function () {
Geben Sie this.model „Gone“ und this.miles „Kilometers“ zurück;
};

var tom = neues Auto("Onkel", 2009, 20000);
var dudu = neues Auto("Dudu", 2010, 5000);

console.log(tom.output());
console.log(dudu.output());

Hier kann die einzelne Instanz von „output()“ von allen Car-Objektinstanzen gemeinsam genutzt werden.

Außerdem: Wir empfehlen, dass Konstruktoren mit einem Großbuchstaben beginnen, um sie von gewöhnlichen Funktionen zu unterscheiden.

Kann ich nur neu verwenden?

Die oben genannten Beispiele verwenden alle „new“, um Objekte für die Funktion „car“ zu erstellen. Ist dies der einzige Weg? Tatsächlich gibt es auch andere Möglichkeiten, wir listen zwei auf:

Code kopieren Der Code lautet wie folgt:

Funktion Auto (Modell, Jahr, Meilen) {
This.model = model;
This.year = Jahr;
This.miles = Meilen;
// Passen Sie einen Ausgabeinhalt an
This.output = function () {
return this.model „Gone“ this.miles „Kilometers“;
}
}

//Methode 1: Als Funktion aufrufen
Car("Onkel", 2009, 20000); //Zum Fensterobjekt hinzufügen
console.log(window.output());

//Methode 2: Aufruf im Rahmen eines anderen Objekts
var o = new Object();
Car.call(o, "Dudu", 2010, 5000);
console.log(o.output());

Methode 1 dieses Codes ist etwas speziell. Wenn Sie die Funktion nicht direkt aufrufen, verweist dies auf das globale Objektfenster:

Code kopieren Der Code lautet wie folgt:

//Aufruf als Funktion

var tom = Car("Onkel", 2009, 20000);

console.log(typeof tom); // „undefiniert“

console.log(window.output()); // „Onkel ist 20.000 Kilometer gelaufen“

Zu diesem Zeitpunkt ist das Objekt tom undefiniert und window.output() gibt das Ergebnis korrekt aus. Wenn Sie jedoch das neue Schlüsselwort verwenden, tritt dieses Problem nicht auf:

Code kopieren Der Code lautet wie folgt:

//Neues Schlüsselwort 
 verwenden
var tom = new Car("Onkel", 2009, 20000);

console.log(typeof tom); // „object“

console.log(tom.output()); // „Onkel ist 20.000 Kilometer gelaufen“

Neu erzwingen

Das obige Beispiel zeigt das Problem, das entsteht, wenn new nicht verwendet wird. Gibt es also eine Möglichkeit für uns, den Konstruktor zu zwingen, das Schlüsselwort new zu verwenden? Die Antwort lautet: Ja, der obige Code:

Code kopieren Der Code lautet wie folgt:

Funktion Auto (Modell, Jahr, Meilen) {
If (!(diese Instanz von Car)) {
Neuwagen zurückgeben (Modell, Jahr, Meilen);
}
This.model = model;
This.year = Jahr;
This.miles = Meilen;
This.output = function () {
return this.model „Gone“ this.miles „Kilometers“;
}
}

var tom = neues Auto("Onkel", 2009, 20000);
var dudu = Car("Dudu", 2010, 5000);

console.log(typeof tom); // "object"
console.log(tom.output()); // „Onkel ist 20.000 Kilometer gelaufen“
console.log(typeof dudu); // "object"
console.log(dudu.output()); // „Dudu ist 5000 Kilometer gelaufen“

Durch die Beurteilung, ob die Instanz von „Car“ ist, können Sie entscheiden, ob Sie „new Car“ zurückgeben oder mit der Ausführung des Codes fortfahren möchten. Wenn das Schlüsselwort „new“ verwendet wird, ist (diese Instanz von „Car“) wahr und die folgende Parameterzuweisung wird fortgesetzt nicht verwendet wird (diese Instanz von Car) ist falsch und eine neue Instanz wird zurückgegeben.

Original-Wrapper-Funktion

Es gibt drei primitive Wrapper-Funktionen in JavaScript: Zahl, Zeichenfolge, Boolescher Wert. Manchmal werden beide verwendet:

Code kopieren Der Code lautet wie folgt:

// Original-Wrapper-Funktion verwenden
var s = new String("my string");
var n = neue Zahl(101);
var b = new Boolean(true);

// Dies wird empfohlen
var s = "meine Zeichenfolge";
var n = 101;
var b = true;

Es wird empfohlen, diese Wrapper-Funktionen nur zu verwenden, wenn Sie den numerischen Status beibehalten möchten. Den Unterschied finden Sie im folgenden Code:

Code kopieren Der Code lautet wie folgt:

// Originalzeichenfolge
var meet = "Hallo";
// Teilen Sie
mit der Methode split() Greet.split(' ')[0]; // "Hallo"
// Beim Hinzufügen neuer Attribute zu primitiven Typen
wird kein Fehler gemeldet grüße.smile = true;
// Es gibt keine Möglichkeit, diesen Wert zu erhalten (wir haben in Kapitel 18 ECMAScript-Implementierung darüber gesprochen, warum)
console.log(typeofgreet.smile); // „undefiniert“

//Originalzeichenfolge
var meet = new String("Hallo");
// Teilen Sie
mit der Methode split() Greet.split(' ')[0]; // "Hallo"
// Das Hinzufügen neuer Attribute zum Wrapper-Funktionstyp führt nicht zu einem Fehler
grüße.smile = true;
// Auf neue Eigenschaften kann normal zugegriffen werden
console.log(typeofgreet.smile); // „boolean“

Zusammenfassung

In diesem Kapitel wird hauptsächlich erläutert, wie das Konstruktormuster verwendet wird, wie es aufgerufen wird und welche Unterschiede es zwischen dem neuen Schlüsselwort gibt. Ich hoffe, dass jeder darauf achtet, wenn es verwendet wird.

Referenz: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript