Verständnis der Javascript-Objektvererbung_Javascript-Fähigkeiten

Beginnen wir mit einer tiefergehenden Untersuchung: Was ist JavaScript-Objektvererbung?

Zum Beispiel haben wir einen Konstruktor für das Objekt „Tier“.

  function animal() {
    this.type = '动物';
  }

Es gibt auch einen Konstruktor für das „cat“-Objekt.

  function cat(name,color) {
    this.name = name;
    this.color = color;
  }

Wir wissen, dass Katzen auch Tiere sind. Wenn dieses Katzenobjekt die Eigenschaften des Tierobjekts erben möchte, was sollen wir tun?

Konstruktorbindung
Die Verwendung der Konstruktorbindung ist die einfachste Methode. Verwenden Sie einfach call oder apply, um das übergeordnete Objekt an das self-Objekt zu binden.

 function cat(name,color) {
    animal.apply(this,arguments);
    this.name = name;
    this.color = color;
  }
  var cat1 = new cat("haha", 'red');
  console.log(cat1.type); //动物

Diese Methode ist jedoch relativ selten.

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

  function extend(Child, Parent) {
　　　　var p = Parent.prototype;
　　　　var c = Child.prototype;
　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　　　}
　　　　c.uber = p;   //桥梁作用
　　}

Anwendung:

 extend(cat, animal);
  var cat1 = new cat("haha","red");
  alert(cat1.type);   // 动物

Prototyp-Vererbung (Prototyp)
Im Vergleich zur oben genannten direkten Bindung ist die Prototyp-Vererbungsmethode häufiger. In Bezug auf Prototypen habe ich sie selbst kurz zusammengefasst.

Jede Funktion verfügt über ein Prototypattribut, das einen Verweis auf ein Objekt darstellt. Wenn Sie das Schlüsselwort new zum Erstellen einer neuen Instanz verwenden, erbt das Instanzobjekt die Eigenschaften und Methoden vom Prototypobjekt.

Mit anderen Worten: Wenn das Prototypattribut des „cat“-Konstruktors auf eine „animal“-Instanz verweist, werden beim Erstellen der „cat“-Objektinstanz die Eigenschaften und Methoden des „animal“-Objekts geerbt.

Geerbte Instanz

 cat.prototype = new animal();
  cat.prototype.constructor = cat;
  var cat1 = new cat("haha","red");
  console.log(cat1.constructor == cat);  //true
  console.log(cat1.type); // 动物

1. In der ersten Zeile des Codes verweisen wir das Prototypobjekt der Katzenfunktion auf eine Instanz des Tierobjekts (das das Typattribut „Tier“ enthält).

2. Was bedeutet die zweite Codezeile?

1) Wenn wir diese Codezeile nicht hinzugefügt haben, führen Sie zunächst

aus

cat.prototype = neues Tier();
console.log(cat.prototype.constructor == animal); //true
Mit anderen Worten: Jedes Prototypobjekt verfügt tatsächlich über ein Konstruktorattribut, das auf seinen Konstruktor verweist.

2), schauen wir uns den Code unten an

 cat.prototype = new animal();
  var cat1 = new cat("haha", 'red');
  console.log(cat1.constructor == animal);  //true

Aus dem oben Gesagten sehen wir, dass der Konstruktor der Instanz cat1 ein Tier ist, also ist es offensichtlich falsch. . . cat1 wird offensichtlich von new cat() generiert, daher sollten wir es manuell korrigieren. Der Konstruktorwert des cat.prototype-Objekts wird in cat geändert.

3), Darauf sollten wir also achten. Wenn wir das Prototypobjekt ersetzen, sollten wir das Konstruktorattribut des Prototypobjekts manuell korrigieren.

o.prototype = {};
o.prototype.constructor = o;
Prototyp direkt erben
Da bei Tierobjekten unveränderliche Attribute direkt in animal.prototype geschrieben werden können. Lassen Sie dann cat.prototype direkt auf animal.prototype verweisen, um eine Vererbung zu erreichen.

Jetzt schreiben wir das Tierobjekt wie folgt um:

  function animal() {
  }
  animal.prototype.type = '动物';

Dann implementieren Sie die Vererbung:

 cat.prototype = animal.prototype;
  cat.prototype.constructor = cat;
  var cat1 = new cat("haha","red");
  console.log(cat1.type); // 动物

Im Vergleich zur vorherigen Methode ist diese Methode effizienter (es wird keine Tierinstanz erstellt) und spart Platz. Aber ist das das Richtige? Die Antwort ist falsch, suchen wir weiter.

cat.prototype = animal.prototype;
Durch diese Codezeile verweisen cat.prototype und animal.prototype auf dasselbe Objekt. Wenn also ein bestimmtes Attribut von cat.prototype geändert wird, wird es in animal.prototype widergespiegelt, was wir offensichtlich nicht sehen möchten.

Zum Beispiel, wenn wir Folgendes ausführen:

console.log(animal.prototype.constructor == animal) //false
Das Ergebnis ist falsch, warum? cat.prototype.constructor = cat; Diese Zeile ändert auch das Konstruktorattribut von animal.prototype.

Verwenden Sie leere Objekte als Vermittler

  var F = function(){};
  F.prototype = animal.prototype;
  cat.prototype = new F();
  cat.prototype.constructor = cat;

Durch die Kombination der beiden oben genannten Methoden nimmt F fast keinen Speicher ein, da es ein leeres Objekt ist. Zu diesem Zeitpunkt hat die Änderung des Prototypobjekts der Katze keine Auswirkungen auf das Prototypobjekt des Tieres.

console.log(animal.prototype.constructor == animal); // true
Dann kapseln wir die obige Methode:

  function extend(Child, Parent) {
　　　　var F = function(){};
　　　　F.prototype = Parent.prototype;
　　　　Child.prototype = new F();
　　　　Child.prototype.constructor = Child;
　　　　Child.uber = Parent.prototype;
　　}

Bei der Verwendung ist die Methode wie folgt:

 extend(cat,animal);
  var cat1 = new cat("haha","red");
  console.log(cat1.type); // 动物

Child.uber = Parent.prototype; Diese Codezeile fungiert als Brücke und ermöglicht es dem uber-Attribut des untergeordneten Objekts, direkt auf das Prototyp-Attribut des übergeordneten Objekts zu verweisen. Dies entspricht dem Öffnen eines Kanals namens uber Das Selbstobjekt ermöglicht es Instanzen des untergeordneten Objekts, alle Eigenschaften und Methoden des übergeordneten Objekts zu verwenden.

Das Obige ist mein Verständnis der JavaScript-Objektvererbung. Ich hoffe, es kann Ihnen mehr oder weniger helfen.