Details zum JavaScript-Prototyp und zur Prototypkette

Vorwort:

JavaScript wird oft als „prototypbasierte Sprache“ beschrieben – jedes Objekt hat ein „Prototypobjekt“, das Objekt verwendet seinen Prototyp als Vorlage und erbt Eigenschaften und Methoden vom Prototyp. Prototypobjekte können auch Prototypen haben, von denen sie Eigenschaften und Methoden usw. erben. Diese Beziehung wird oft als „Prototypenkette“ bezeichnet und erklärt, warum ein Objekt Eigenschaften und Methoden hat, die in anderen Objekten definiert sind.

Genauer gesagt werden diese Eigenschaften und Methoden in prototype Object Objektkonstruktors definiert und nicht in der Objektinstanz selbst.

Vier Sätze verdeutlichen den Prototypen und die Prototypenkette:

• Jede Funktion (Klasse) wird mit einer Eigenschaft prototype geboren. Der Eigenschaftswert ist ein Objekt, das die Eigenschaften und Methoden der aktuellen Klasse zur Verwendung in einer Instanz speichert (Prototyp anzeigen).
• Im Heap-Speicher, den der Browser standardmäßig für den Prototyp öffnet, gibt es eine constructor -Eigenschaft: Sie speichert die aktuelle Klasse selbst (⚠️Hinweis: Im Heap-Speicher, den Sie selbst öffnen, gibt es standardmäßig keine constructor Eigenschaft, Sie müssen sie manuell hinzufügen) „(Konstruktor)“
• Jedes Objekt besitzt eine __proto__ Eigenschaft, die auf den Prototyp der Klasse verweist, zu der die aktuelle Instanz gehört (wenn die Klasse nicht bestimmt ist, verweist sie auf Object.prototype ) (impliziter Prototyp)
• Wenn Sie versuchen, eine Eigenschaft eines Objekts abzurufen, und das Objekt selbst diese Eigenschaft nicht besitzt, wird in seinem impliziten Prototyp __proto__ danach gesucht (d. h. dem prototype seines Konstruktors). „(Prototypkette)“
  

Die Beziehung zwischen Konstruktor, Prototyp und Instanz:

Jeder constructor hat ein prototype , das einen Zeiger auf prototype constructor enthält, und jede instance enthält einen internen Zeiger auf das Prototypobjekt （__proto__)

1. Prototyp (expliziter Prototyp)

Jede Funktion hat eine prototype

// Konstruktor (Klasse)
Funktion Person(Name){
    dieser.name = Name
}
//Neue Instanz (Objekt)
var person = neue Person('Person')
console.log(person) //Person { name: 'Person' }
console.log(Person.prototype) //Prototyp der Konstruktorfunktion (Klasse)----->Objekt Person.prototype.age = 18 // Prototyp der Konstruktorfunktion console.log(person.age) // 18

Oben haben wir den Prototyp dieser Funktion Person ausgedruckt, der auf ein Objekt zeigt, und dieses Objekt ist der Prototyp der Instanz, die durch den Aufruf des Konstruktors erstellt wurde

Das obige Bild zeigt die Beziehung zwischen dem Konstruktor und dem Instanzprototyp, sodass wir wissen, dass die Prototypeigenschaft des Konstruktors auf ein Objekt verweist.

Welche Beziehung besteht zwischen einer Instanz und ihrem Prototyp? Hier müssen wir das Attribut __proto__ erwähnen

2. __proto__ (impliziter Prototyp)

Aus den obigen vier Sätzen können wir erkennen, dass dies eine Eigenschaft ist, die jedes Javascript Objekt (außer null) hat. Diese Eigenschaft zeigt auf den Prototyp des Objekts (d. h. den Instanzprototyp).

Da es in JavaScript kein Klassenkonzept gibt, werden zur Implementierung einer vererbungsähnlichen Methode Objekte und Prototypen über __proto__ miteinander verknüpft, um eine Prototypenkette zu bilden, sodass Objekte auf Eigenschaften zugreifen können, die ihnen nicht gehören.

Dann können wir die Beziehung zwischen der Instanz und dem Instanzprototyp beweisen

console.log(person.__proto__) //Instanz (Objekt) Prototyp ---> Objekt console.log(person.__proto__ === Person.prototype) //Der Prototyp der Instanz ist gleich dem Prototyp der Konstruktorfunktion

Aus der obigen Abbildung können wir ersehen, dass sowohl Instanzobjekte als auch Konstruktoren auf Prototypen verweisen können. Können Prototypen also auf Konstruktoren oder Instanzen verweisen?

3. Konstruktor

Der Prototyp hat keine Attribute, die auf die Instanz verweisen, da ein Konstruktor mehrere Instanzobjekte erstellen kann.

Aus den vorherigen vier Sätzen wissen wir, dass „im Heap-Speicher, der vom Browser standardmäßig für den Prototyp zugewiesen wird, eine constructor Eigenschaft vorhanden ist“, sodass der Prototyp auch auf die Konstruktor-Funktion verweisen kann. Diese Eigenschaft ist „ constructor “

Damit können wir es beweisen:

console.log(Person.prototype.constructor) // Konstruktor des expliziten Prototyps der Instanz ƒ Person(name){this.name = name}
console.log(person.__proto__.constructor) //Impliziter Prototyp-Konstruktor der Instanz ƒ Person(name){this.name = name}
console.log(person.__proto__.constructor === Person.prototype.constructor) //true Der Konstruktor des Instanzprototyps ist gleich dem Konstruktor der Klasse console.log(Person === Person.prototype.constructor) //true

Wie wird __proto__ eines Instanzobjekts generiert?
Wir wissen, dass das generierte Instanzobjekt bei Verwendung des neuen Operators ein __proto__ Attribut hat

Funktion Foo() {}
// Diese Funktion ist ein Instanzobjekt von Function // Funktion ist eine Syntaxvereinfachung // Sie ruft intern tatsächlich new Function() auf

Man kann also sagen, dass im new Prozess das neue Objekt mit dem Attribut __proto__ hinzugefügt und mit dem Prototyp des Konstruktors verknüpft wird.

4. Das Prinzip des Neuen

Vereinfacht ausgedrückt kann man es in die folgenden vier Schritte unterteilen:

• Ein neues leeres Objekt erstellen
• Link-Prototyp
• Binden Sie dies und führen Sie den Konstruktor aus
• Gibt das neue Objekt zurück
  

Funktion meinNeu() {
// 1. Erstelle ein neues leeres Objekt let obj = {}
// 2. Holen Sie sich den Konstruktor let con = arguments.__proto__.constructor
// 3. Link-Prototyp obj.__proto__ = con.prototype
// 4. Binden Sie dies und führen Sie den Konstruktor aus let res = con.apply(obj, arguments)
// 5. Gib ein neues Objekt zurück return typeof res === 'object' ? res : obj
}

5. Prototypenkette

Nachdem wir über Prototypen gesprochen haben, schauen wir uns an, was die Prototypenkette ist. Schauen wir uns zunächst ein Bild an:

In diesem Bild wird die durch __proto__ verbundene Kettenbeziehung als Prototypkette bezeichnet.

5.1 Die Rolle der Prototypenkette

Die Prototypenkette bestimmt, wie Vererbung in JavaScript implementiert wird. Wenn wir auf eine Eigenschaft zugreifen, ist ihr Suchmechanismus wie folgt:

• Greifen Sie auf die Instanzattribute des Objekts zu. Wenn es welche gibt, geben Sie sie direkt zurück. Wenn nicht, suchen Sie im Prototypobjekt über __proto__ danach.
• Wenn es im Prototypobjekt gefunden werden kann, wird es zurückgegeben. Wenn es nicht gefunden werden kann, wird die Suche im __proto__ des Prototypobjekts fortgesetzt.
• Suchen Sie weiter, bis Sie Object.prototype finden. Wenn Sie es finden, geben Sie es zurück. Wenn Sie es nicht finden können, geben Sie undefined zurück. Suchen Sie nicht weiter, da Object.prototype.__proto__ null ist, was bedeutet, dass Object die Spitze der Prototypenkette aller Objekte ist.

Aus der Abbildung können wir ersehen, dass alle Objekte schließlich Object.prototype über die Prototypenkette finden können. Obwohl Object.prototype auch ein Objekt ist, wird dieses Objekt nicht von Object erstellt, sondern von der Engine selbst erstellt Object.prototype. Man kann also sagen, dass alle Instanzen Objekte sind, aber nicht alle Objekte Instanzen sind.

5.2 Was ist das __proto__ eines Konstruktors?

Aus der obigen Erklärung der Prototypenkette sollten wir in der Lage sein, __proto__ der Konstruktorfunktion zu verstehen. In JavaScript ist alles ein Objekt, daher muss die Konstruktorfunktion auch ein Objekt sein, und ein Objekt hat __proto__ .

Funktion Person(){}
console.log(Person.__proto__)
Konsole.log(Funktion.Prototyp)
console.log(Person.__proto__===Funktion.prototyp) // wahr

„Dies zeigt auch, dass alle Funktionen Instanzen von Funktionen sind.“

Wenn wir es so verstehen, dann ist Function.__proto__ gleich Function.prototype。。。。 Drucken wir es aus und sehen wir

Funktion.__proto__ === Funktion.prototype // wahr

Dies ist genau das, was es ausdruckt. Wird Function.prototype auch von new Function() generiert?

Die Antwort ist nein, auch diese Funktion wird von der Engine selbst erstellt. Zuerst erstellt die Engine Object.prototype, dann Function.prototype und verbindet die beiden über __proto__. Dies erklärt auch die obige Frage sehr gut, warum let fun = Function.prototype.bind() keine Prototype-Eigenschaft hat. Da Function.prototype ein von der Engine erstelltes Objekt ist, geht die Engine davon aus, dass es nicht notwendig ist, diesem Objekt eine Prototypeigenschaft hinzuzufügen.

6. Zusammenfassung

• Object ist der Vater aller Objekte. Alle Objekte können es über __proto__ finden.
• Function ist der Vater aller Funktionen. Alle Funktionen können sie über __proto__ finden.
• Function.prototype und Object.prototype sind zwei spezielle Objekte, die von der Engine erstellt werden.
• Mit Ausnahme der beiden oben genannten Spezialobjekte werden andere Objekte durch den Konstruktor erstellt.
• prototype einer Funktion ist ein Objekt, also ein Prototyp
• Das __proto__ des Objekts zeigt auf den Prototyp. __proto__ verbindet das Objekt und den Prototyp, um eine Prototypenkette zu bilden.

Dies ist das Ende dieses Artikels über die Details des JavaScript Prototyps und der Prototypenkette. Weitere relevante Inhalte JavaScript Prototyp und zur Prototypenkette finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!