einführen
Jeder ist mit Konstruktoren vertraut, aber wenn Sie ein Anfänger sind, ist es immer noch notwendig zu verstehen, was Konstruktoren sind. Der Konstruktor wird verwendet, um einen bestimmten Objekttyp zu erstellen - nicht nur das verwendete Objekt deklariert, sondern akzeptiert auch Parameter, um den Elementwert des Objekts festzulegen, wenn das Objekt zum ersten Mal erstellt wird. Sie können Ihren eigenen Konstruktor anpassen und die Eigenschaften oder Methoden des benutzerdefinierten Objekts deklarieren.
Grundnutzung
In JavaScript werden Konstruktoren normalerweise als Implementierung von Instanzen angesehen. JavaScript hat nicht das Konzept der Klassen, sondern spezielle Konstruktoren. Verwenden Sie das neue Schlüsselwort, um die definierte frühe Funktion aufzurufen. Sie können JavaScript erkennen, dass Sie ein neues Objekt erstellen möchten und dass die Mitgliedserklärungen des neuen Objekts im Konstruktor definiert sind. Innerhalb des Konstruktors bezieht sich dieses Schlüsselwort auf das neu erstellte Objekt. Die grundlegende Verwendung ist wie folgt:
Die Codekopie lautet wie folgt:
Funktion Car (Modell, Jahr, Meilen) {
this.model = Modell;
this.year = Jahr;
this.miles = Meilen;
this.output = function () {
zurück this.model + "links" + this.miles + "km";
};
}
Var Tom = New Car ("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, aber es ist ein kleines Problem. Erstens ist es sehr problematisch, die Vererbung zu verwenden. Zweitens wird Output () jedes Mal neu definiert, wenn ein Objekt erstellt wird. Der beste Weg ist, alle Instanzen des Autotyps diese Output () -Methode freizusetzen zu lassen, sodass bei großen Fällen eine Menge Speicher speichert.
Um dieses Problem zu lösen, können wir die folgende Methode verwenden:
Die Codekopie lautet wie folgt:
Funktion Car (Modell, Jahr, Meilen) {
this.model = Modell;
this.year = Jahr;
this.miles = Meilen;
this.output = formatcar;
}
Funktion formatcar () {
zurück this.model + "links" + this.miles + "km";
}
Obwohl diese Methode verfügbar ist, haben wir die folgende bessere Methode.
Konstruktoren und Prototypen
In JavaScript befindet sich eine Prototyp -Eigenschaft, die als Prototyp bezeichnet wird. Wenn der Konstruktor aufgerufen wird, um ein Objekt zu erstellen, sind alle Eigenschaften des Konstruktorprototyps im neu erstellten Objekt verfügbar. Auf diese Weise können mehrere Autoobjektinstanzen denselben Prototyp teilen. Erweitern wir den Code im obigen Beispiel:
Die Codekopie lautet wie folgt:
Funktion Car (Modell, Jahr, Meilen) {
this.model = Modell;
this.year = Jahr;
this.miles = Meilen;
}
/*
Hinweis: Hier haben wir das Object.Prototyp verwendet. Methodenname, nicht das Object.Prototype
Es wird hauptsächlich verwendet, um das Umschreiben des Prototyp -Prototyp -Objekts zu vermeiden
*/
Car.prototype.output = function () {
zurück this.model + "links" + this.miles + "km";
};
Var Tom = New Car ("Onkel", 2009, 20000);
var dudu = neues Auto ("Dudu", 2010, 5000);
console.log (tom.output ());
console.log (dudu.output ());
Hier kann Output () Einzelinstanz in allen Autoobjektinstanzen geteilt und verwendet werden.
Außerdem empfehlen wir, dass Konstruktoren mit Großbuchstaben beginnen, um normale Funktionen zu unterscheiden.
Kannst du nur neu benutzen?
Im obigen Beispiel wird das Funktionauto mit neuem Erstellen von Objekten erstellt. Gibt es nur einen Weg? Tatsächlich gibt es andere Möglichkeiten: Listen wir zwei auf:
Die Codekopie lautet wie folgt:
Funktion Car (Modell, Jahr, Meilen) {
this.model = Modell;
this.year = Jahr;
this.miles = Meilen;
// Anpassen eines Ausgangsausgangs
this.output = function () {
zurück this.model + "links" + this.miles + "km";
}
}
// Methode 1: Als Funktion aufgerufen
Car ("Onkel", 2009, 20000); // zum Fensterobjekt hinzufügen
console.log (window.output ());
// Methode 2: Rufen Sie im Bereich eines anderen Objekts auf
var o = neues Objekt ();
Car.call (O, "Dudu", 2010, 5000);
console.log (o.output ());
Methode 1 dieses Codes ist etwas Besonderes. Wenn Neue die Funktion direkt aufruft, verweist dies auf das globale Objektfenster. Überprüfen wir es:
Die Codekopie lautet wie folgt:
// als Funktionsaufruf
Var Tom = Car ("Onkel", 2009, 20000);
console.log (typeof tom); // "undefiniert"
console.log (window.output ()); // "Onkel ging 20.000 Kilometer"
Zu diesem Zeitpunkt ist das Objekt Tom undefiniert, und Window.output () gibt das Ergebnis korrekt aus. Wenn Sie das neue Schlüsselwort verwenden, gibt es kein solches Problem. Die Überprüfung ist wie folgt:
Die Codekopie lautet wie folgt:
// Neues Schlüsselwort verwenden
Var Tom = New Car ("Onkel", 2009, 20000);
console.log (typeof tom); // "Objekt"
console.log (tom.output ()); // "Onkel ging 20.000 Kilometer"
Neu erzwingen
Das obige Beispiel zeigt das Problem, nicht neu zu verwenden. Gibt es also eine Möglichkeit für den Konstruktor, das neue Schlüsselwort zu erzwingen? Die Antwort lautet Ja, über Code:
Die Codekopie lautet wie folgt:
Funktion Car (Modell, Jahr, Meilen) {
if (! (diese Instanz des Autos)) {
Neues Auto zurückgeben (Modell, Jahr, Meilen);
}
this.model = Modell;
this.year = Jahr;
this.miles = Meilen;
this.output = function () {
zurück this.model + "links" + this.miles + "km";
}
}
Var Tom = New Car ("Onkel", 2009, 20000);
var dudu = car ("Dudu", 2010, 5000);
console.log (typeof tom); // "Objekt"
console.log (tom.output ()); // "Onkel ging 20.000 Kilometer"
console.log (typeof dudu); // "Objekt"
console.log (dudu.output ()); // "Dudu ging 5000 Kilometer"
Indem wir beurteilen, ob dieser Instanz eines Autos ist, beschließen wir, ein neues Auto zurückzugeben oder den Code weiter auszuführen. Wenn das neue Schlüsselwort verwendet wird (dieses Instanz des Autos) ist wahr, und die folgende Parameterzuweisung wird fortgesetzt. Wenn neu nicht verwendet wird, ist (dieses Instanz des Autos) falsch und eine neue Instanz wird erneut zurückgegeben.
Original -Wrapper -Funktion
In JavaScript gibt es 3 Original -Wrapper -Funktionen: Nummer, String, Boolescher, manchmal werden beide verwendet:
Die Codekopie lautet wie folgt:
// Verwenden Sie die Original -Wrapper -Funktion
var s = new String ("my String");
var n = neue Zahl (101);
var b = neuer boolean (true);
// dies empfehlen
var s = "meine String";
var n = 101;
var b = true;
Empfohlen, verwenden Sie diese Wrapper -Funktionen nur, wenn Sie den numerischen Zustand bewahren möchten. Für den Unterschied können Sie sich auf den folgenden Code beziehen:
Die Codekopie lautet wie folgt:
// Original String
var greet = "Hallo da";
// verwenden
Greet.Split ('') [0]; // "Hallo"
// Hinzufügen neuer Attribute zum ursprünglichen Typ meldet keinen Fehler
greet.smile = true;
// Dieser Wert kann nicht erhalten werden (wir haben darüber gesprochen, warum in Kapitel 18 die Implementierung von ECMascript)
console.log (typeof greet.smile); // "undefiniert"
// Original String
var greet = new String ("Hallo da");
// verwenden
Greet.Split ('') [0]; // "Hallo"
// Hinzufügen neuer Attribute zum Wrapper -Funktionstyp meldet keinen Fehler
greet.smile = true;
// Neue Eigenschaften können normal zugegriffen werden
console.log (typeof greet.smile); // "boolean"
Zusammenfassen
In diesem Kapitel wird hauptsächlich die Unterschiede zwischen der Verwendung des Konstruktormodus, der Aufrufmethode und dem neuen Schlüsselwort erläutert. Ich hoffe, jeder wird darauf achten, wenn sie es benutzen.
Referenz: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorPatternjavaScript