Verstehen Sie die Vererbung des JavaScript -Objekts

Lassen Sie uns zunächst die Frage in der Tiefe untersuchen. Was ist JavaScript -Objekt -Vererbung?

Zum Beispiel haben wir einen Konstruktor eines "tierischen" Objekts.

 Funktion Animal () {this.type = 'Animal'; }

Es gibt auch einen Konstruktor für das "Katzen" -Objekt.

 Funktion cat (Name, Farbe) {this.name = name; this.color = color; }

Wir wissen, dass Katzen auch Tieren gehören. Wenn dieses Katzenobjekt die Eigenschaften des Tierobjekts erben will, was sollen wir dann tun?

Konstruktorbindung

Die Verwendung von Konstruktorenbindung ist der einfachste Weg. Verwenden Sie einfach den Anruf oder wenden Sie sich an, um das übergeordnete Objekt an das eigene Objekt zu binden.

 Funktion cat (Name, Farbe) {Animal.Apply (this, Argumente); this.name = name; this.color = color; } var cat1 = new Cat ("haha", 'rot'); console.log (Cat1.Type); // Tiere

Diese Methode ist jedoch relativ selten.

Vererbung kopieren

Wenn alle Eigenschaften und Methoden des übergeordneten Objekts in das untergeordnete Objekt kopiert werden, kann auch die Vererbung erreicht werden.

 Funktion erweitert (untergeordnet, übergeordnet) {var p = parent.prototype; var c = child.Prototyp; für (var i in p) {c [i] = p [i]; } C.uber = p; // Brückenfunktion}

Wie man verwendet:

 erweitern (Katze, Tier); var cat1 = new cat ("haha", "rot"); Alert (Cat1.Type); // Tier

Prototyp -Vererbung (Prototyp)

Im Vergleich zur obigen direkten Bindung ist die Methode der Prototyp -Vererbung häufiger. Ich habe den Prototyp selbst kurz selbst zusammengefasst.

Jede Funktion hat ein Prototyp -Attribut, das ein Hinweis auf ein Objekt ist. Beim Erstellen einer neuen Instanz mit dem neuen Schlüsselwort erbt dieses Instanzobjekt Attribute und Methoden aus dem Prototyp -Objekt.

Das heißt, wenn das Prototyp -Attribut des "Katzen" -Konstruktors auf eine "Tier" -Stanz hingewiesen wird, werden die Eigenschaften und Methoden des "Tier" -Objekts, wenn die Objektinstanz "Katzen" erstellt wird, vererbt.

Vererbungsbeispiel

 Cat.Prototype = new Animal (); Cat.Prototype.Constructor = cat; var cat1 = new cat ("haha", "rot"); console.log (Cat1.Constructor == CAT); // True Console.log (Cat1.Type); //Tier

1. In der ersten Zeile des Codes weisen wir das Prototypobjekt der Katzenfunktion auf eine Instanz eines tierischen Objekts (das das Typattribut des Tieres enthält) verweist.

2. Was bedeutet die zweite Zeile des Codes?

1) Erstens, wenn wir diese Codezeile nicht hinzufügen, laufen Sie aus

Cat.Prototype = new Animal ();

console.log (Cat.Prototype.Constructor == Animal); //WAHR

Mit anderen Worten, jedes Prototypobjekt hat ein Konstruktorattribut, das auf seine Konstruktorfunktion hinweist.

2) Schauen wir uns den folgenden Code an

 Cat.Prototype = new Animal (); var cat1 = new cat ("haha", 'rot'); console.log (Cat1.Constructor == Animal); //WAHR

Aus dem obigen sehen wir, dass der Konstruktor von Instance Cat1 ein Tier ist, so dass es offensichtlich falsch ist. . . CAT1 wird eindeutig von New Cat () erzeugt, daher sollten wir es manuell korrigieren. Der Konstruktorwert des CAT.Prototyp -Objekts wird in CAT geändert.

3) Das ist also auch ein Punkt, auf den wir achten sollten. Wenn wir das Prototyp -Objekt ersetzen, sollten wir das Konstruktorattribut des Prototyp -Objekts manuell korrigieren.

O.Prototyp = {};

O.Prototype.Constructor = O;

Direkt erben Prototyp

Da in Tierobjekten unveränderte Eigenschaften direkt in Animal.Prototyp geschrieben werden können. Lassen Sie dann Cat.Prototype auf Animal.Prototyp verweisen, der die Vererbung realisiert.

Schreiben wir nun das Tierobjekt zuerst um:

 Funktion Animal () {} Animal.Prototype.Type = 'Animal';

Implementieren Sie dann Vererbung:

 Cat.Prototype = Animal.Prototyp; Cat.Prototype.Constructor = cat; var cat1 = new cat ("haha", "rot"); console.log (Cat1.Type); // Tiere

Im Vergleich zur vorherigen Methode scheint diese Methode effizienter zu sein (es werden keine Tierinstanzen erstellt) und sparen Platz. Aber ist das richtig? Die Antwort ist falsch, lasst uns weiter lesen.

Cat.Prototype = Animal.Prototyp;

Diese Codezeile ermöglicht es Cat.Prototype und Animal.Prototype, auf dasselbe Objekt zu verweisen. Wenn also eine bestimmte Eigenschaft von Cat.Prototyp geändert wird, wird sie auf Animal.Prototypen widerspiegelt, was offensichtlich nicht das ist, was wir sehen wollen.

Zum Beispiel rennen wir:

console.log (Animal.Prototype.Constructor == Animal) // Falsch

Es stellte sich heraus, dass es falsch war, warum? Cat.Prototype.Constructor = cat; Diese Linie ändert auch die Konstruktoreigenschaft von Animal.Prototyp.

Verwenden Sie leere Objekte als Vermittler

 var f = function () {}; F.Prototype = Animal.Prototyp; Cat.Prototype = new f (); Cat.Prototype.Constructor = cat;

Kombinieren Sie die beiden oben genannten Methoden, da f ein leeres Objekt ist, es wird fast kein Gedächtnis. Das Ändern des Prototypobjekts von Cat zu diesem Zeitpunkt wirkt sich nicht auf das Prototypobjekt des Tieres aus.

console.log (Animal.Prototype.Constructor == Animal); // WAHR

Dann umfassen wir die obige Methode:

 Funktion erweitert (untergeordnet, übergeordnet) {var f = function () {}; F.Prototype = parent.prototype; Child.Prototype = new f (); Child.Prototype.Constructor = Child; Child.uber = parent.prototype; }

Bei der Verwendung lautet die Methode wie folgt:

 erweitern (Katze, Tier); var cat1 = new cat ("haha", "rot"); console.log (Cat1.Type); // Tier

Child.uber = parent.prototype; Diese Codezeile ist eine Brückenfunktion, mit der das Uber -Attribut des untergeordneten Objekts direkt auf das Prototyp -Attribut des übergeordneten Objekts verweist, das dem Öffnen eines Kanals, der auf dem eigenen Objekt bezeichnet wird, so entspricht, dass die Instanz des untergeordneten Objekts alle Eigenschaften und Methoden des übergeordneten Objekts verwenden kann.

Das obige ist mein Verständnis der Erben von JavaScript -Objekten. Ich hoffe, es kann Ihnen mehr oder weniger helfen. Vielen Dank für Ihre Lektüre.