Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten

1. Was ist ein Prototyp?

Prototyp: Wenn jedes JavaScript-Objekt (außer Null) erstellt wird, wird es mit einem anderen Objekt verknüpft. Dieses Objekt nennen wir den Prototyp. Jedes Objekt „erbt“ Eigenschaften vom Prototyp.

Zum Beispiel

var obj = neues Objekt();

Wenn Sie ein Objekt erstellen, verknüpfen Sie es gleichzeitig mit einem anderen Objekt. Wie in der Abbildung gezeigt, ist das verknüpfte Objekt der Prototyp des neu erstellten Objekts obj.

2. Prototyp

In JavaScript hat jede Funktion eine Prototypeigenschaft, die auf das Prototypobjekt der Funktion verweist. (P.S.: Eine Funktion ist eigentlich auch ein Objekt, es steht also nicht im Widerspruch zum Beispiel in 1 oben)

var obj = neues Objekt();

Der sogenannte Prototyp ist eigentlich die Eigenschaft, die dem Prototyp des Objekts zugeordnet ist, wie in der Abbildung dargestellt

Zum Beispiel:

 Funktion Tier(Gewicht) {
   this.weight = Gewicht
 }

Die folgende Abbildung zeigt die Beziehung zwischen Objekten und Prototypen:

Jedes Objekt „erbt“ Eigenschaften von seinem Prototyp

Beispielsweise instanziieren cat1 und cagt2 Animal. In cat1 und cagt2 gibt es kein Höhenattribut, aber der Wert von height kann als 10 ausgegeben werden. Tatsächlich erben cat1 und cagt2 das Höhenattribut im Prototyp Animal.prototype.

 Funktion Tier(Gewicht) {
    this.weight = Gewicht
  }
  Tier.Prototyp.Höhe = 10
  var cat1 = neues Tier()
  var cat2 = neues Tier()
  konsole.log('cat1',cat1.höhe)//10
  konsole.log('cat2',cat2.höhe)//10

__proto__

Dies ist eine Eigenschaft, die jedes Objekt (außer null) hat, genannt __proto__, die auf den Prototyp des Objekts verweist.

  Funktion Tier(Gewicht) {
     this.weight = Gewicht
  }
  Tier.Prototyp.Höhe = 10
  var cat1 = neues Tier()
  var cat2 = neues Tier()
 Konsole.log('cat1.__proto__ === Tier.prototyp',cat1.__proto__ === Tier.prototyp)
 Konsole.log('cat2.__proto__ === Tier.prototyp',cat2.__proto__ === Tier.prototyp) 

__proto__ und prototype

• __proto__ ist das Attribut der Instanz, das auf den Prototyp zeigt
• Prototyp ist die Eigenschaft eines Objekts oder Konstruktors, der auf einen Prototyp verweist

4. Konstruktor

Jeder Prototyp verfügt über eine Konstruktoreigenschaft, die auf den zugehörigen Konstruktor verweist.

  Funktion Tier(Gewicht) {
     this.weight = Gewicht
  }
  Tier.Prototyp.Höhe = 10
  var cat1 = neues Tier()
  var cat2 = neues Tier()
 Konsole.log('cat1.__proto__ === Tier.prototyp',cat1.__proto__ === Tier.prototyp)
 Konsole.log('Tier===Tier.Prototyp.Konstruktor',Tier===Tier.Prototyp.Konstruktor)
// Holen Sie sich das Prototypobjekt console.log('Object.getPrototypeOf(cat1) === Animal.prototype',Object.getPrototypeOf(cat1) === Animal.prototype) 

Aktualisieren des Beziehungsdiagramms

cat1.__proto__ === Tier.prototyp

Tier === Tier.Prototyp.Konstruktor

Ist cat1.constructor === Animal wahr? Die Antwort ist richtig, da jedes Objekt Eigenschaften von seinem Prototyp „erbt“. In cat1 gibt es keinen Attributkonstruktor, aber sein Prototyp cat1.__proto__ verweist auf Animal.prototype. Der Prototyp von Animal.prototype hat jedoch den Attributkonstruktor, sodass das Konstruktorattribut von cat1 das Konstruktorattribut im Prototyp erbt. Hier sehen wir einen kleinen Teil der Prototypenkette. Schauen wir uns an

Daher ist auch cat1.constructor === Animal wahr

5. Beispiele und Prototypen

Wenn beim Lesen der Attribute einer Instanz diese nicht gefunden werden können, wird nach den Attributen im Prototyp gesucht, der dem Objekt zugeordnet ist. Wenn diese immer noch nicht gefunden werden können, wird nach dem Prototyp des Prototyps gesucht und so weiter, bis die oberste Ebene gefunden wird. Dies bildet eine Prototypenkette

Funktion Tier(Gewicht) {
   this.weight = Gewicht
}
 Tier.Prototyp.Name = "Tier"
 var cat1 = neues Tier()
 cat1.name = "kleine Katze"
 Konsole.log('cat1.name',cat1.name)
 lösche cat1.name;
 Konsole.log('cat1.name',cat1.name) 

Wie Sie sehen, war es vor dem Löschen des Attributs littleCat. Nach dem Löschen des Attributs hat die Instanz kein Namensattribut mehr. Wenn sie das Namensattribut nicht finden kann, sucht sie danach in ihrem Objektprototyp, also in cat1.__proto__, also in Animal.prototype. Der Wert des Namensattributs in Animal.prototype ist animal, daher wird der Wert nach dem Löschen des Namensattributs zum Wert des Attributnamens im Prototyp, animal.

Schauen wir uns dann an, was passiert, wenn der Prototyp von cat1 auch kein Namensattribut hat? Was wird passieren? Suchen Sie danach im Prototyp des Prototyps? Was ist also der Prototyp des Prototyps?

6. Prototyp des Prototyps

Wir sagen, dass ein Prototyp ein anderes Objekt ist, das einem Objekt bei seiner Erstellung zugeordnet wird. Ein Prototyp ist also auch ein Objekt. Da es sich um ein Objekt handelt, sollte ein Prototyp auch einem Objekt zugeordnet werden.

Wenn dann das Prototypobjekt erstellt wird, wird es auch einem Objekt zugeordnet

var obj = neues Objekt();

Siehe das Beziehungsdiagramm

Was ist also mit dem Prototyp von Object.prototype?

Was ist also Object.prototype.__proto__?

Konsole.log('Objekt.prototype.__proto__ === null',Objekt.prototype.__proto__ === null)

Sie können die Ergebnisse sehen

Das heißt, der Wert von Object.prototype.__proto__ ist null, was bedeutet, dass Object.prototype keinen Prototyp hat. Man kann sich also vorstellen, dass in der Prototypenkette, wenn das Attribut den Prototyp der obersten Ebene findet und es kein Attribut gibt, dann gibt es kein solches Attribut.

7. Prototypenkette

Zusammenfassend lässt sich sagen, dass durch die Zuweisung einer Instanz eines Prototyps zu einem anderen Objekt, das wiederum anderen Objekten zugewiesen wird, und durch die Zuweisung unterschiedlicher Werte zu Objekten im eigentlichen Code eine Prototypenkette gebildet wird. Das mag sehr abstrakt sein, schauen wir uns ein Beispiel an

 Funktion Tier(Gewicht) {
     this.weight = Gewicht
 }
 Tier.Prototyp.Name = "Tier"
 var cat1 = neues Tier()
 var pinkCat = cat1
 console.log('pinkCat.name',pinkCat.name)
 Konsole.log('pinkCat.__proto__ === cat1.__proto__ == Tier.prototyp',pinkCat.__proto__ === cat1.__proto__ == Tier.prototyp)
 var samllPinkCat = pinkCat
 console.log('samllPinkCat.name',samllPinkCat.name)
 Konsole.log(samllPinkCat.__proto__ == pinkCat.__proto__ === cat1.__proto__ == Animal.prototype)

Das Obige ist die Prototypenkette. Die Verbindung von Schicht zu Schicht zu einer Kette ist die sogenannte Prototypenkette. Im Obigen instanziiert cat1 Animal, cat1 wird pinkCat zugewiesen und pinkCat wird samllPinkCat zugewiesen, wodurch eine Prototypenkette von samllPinkCat, pinkCat zu cat1 und schließlich zu Animal entsteht.

Das Obige ist meine Einführung in das vertiefte Verständnis von JavaScript-Prototypen und Prototypenketten. Ich hoffe, es wird für alle hilfreich sein. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!