Grundlegendes zur JavaScript-Prototypenkette

Nach dem Lesen dieses Artikels werden Sie feststellen, dass Prototypen und Prototypenketten so einfach sind! Das klassische Gleichheitsdiagramm der Prototypkette oben können Sie mit dem folgenden Lernprozess problemlos meistern.

1. Verständnis der Gleichheitsbeziehung zwischen Prototyp und Prototypkette

Zunächst müssen wir zwei Konzepte klar verstehen:

js ist in Funktionsobjekte und normale Objekte unterteilt. Jedes Objekt hat ein __proto__ Attribut, aber nur Funktionsobjekte haben prototype Attribut.
Object und Function sind integrierte Funktionen in js. Ähnliche Funktionen sind Array , RegExp , Date , Boolean , Number und String , die wir häufig verwenden.

Bitte lesen Sie diese beiden Konzepte dreimal mit mir durch und merken Sie sie sich. Sie werden später gebraucht.

Was sind also __proto__ und prototype ? Lassen Sie uns sie anhand von zwei Konzepten verstehen

• Das Attribut __proto__ ist ein Objekt, das zwei Attribute hat, constructor und __proto__ ;
• Das Prototypobjekt prototype verfügt über eine constructor , die verwendet wird, um aufzuzeichnen, welcher Konstruktor die Instanz erstellt hat.
  

Bitte lesen Sie diese beiden Konzepte dreimal mit mir durch und merken Sie sie sich. Sie werden später gebraucht.

Es gibt den folgenden Konstruktor „ Person , dessen Prototyp das Länderattribut motherland='China' hat.

 Funktion Person(Name, Alter){ 
    dieser.name = Name;
    dieses.Alter = Alter;
 }
 
 Person.Prototyp.Mutterland = "China"

person01 Instanz erstellt durch new Person()

 let person01 = neue Person('Xiaoming', 18);

Der Vater von JS befolgte beim Entwurf von JS-Prototypen und Prototypenketten die folgenden beiden Prinzipien:

 Person.prototype.constructor == Person // **Richtlinie 1: Der Konstruktor des Prototypobjekts (also Person.prototype) zeigt auf den Konstruktor selbst**
 person01.__proto__ == Person.prototype // **Richtlinie 2: Das __proto__ der Instanz (also person01) und das Prototypobjekt zeigen auf die gleiche Stelle**

Bitte lesen Sie diese beiden Regeln dreimal mit mir durch und merken Sie sie sich. Sie werden später verwendet.

Denken Sie an die oben genannten vier Konzepte und zwei Kriterien . Jede Beurteilung der Gleichheit einer Prototypkette kann korrekt sein.

Sie können das obige Bild überprüfen, um zu sehen, ob Sie das Konzept und die Kriterien verstanden haben. Sehen Sie sich unbedingt das obige Bild an.

// Beginnen Sie mit der Analyse dieses klassischen Graphen von oben aus Funktion Foo() Funktion Foo()
sei f1 = neues Foo();
sei f2 = neues Foo();

f1.__proto__ = Foo.prototype; // Regel 2
f2.__proto__ = Foo.prototype; // Regel 2
Foo.prototype.__proto__ = Object.prototype; // Regel 2 (Foo.prototype ist auch ein allgemeines Objekt, daher gilt Regel 2)
Object.prototype.__proto__ = null; // Die Prototypenkette endet hier Foo.prototype.constructor = Foo; // Regel 1
Foo.__proto__ = Funktion.prototyp; // Regel 2
Function.prototype.__proto__ = Object.prototype; // Prinzip 2 (Function.prototype ist im Wesentlichen ein allgemeines Objekt, daher gilt Prinzip 2)
Object.prototype.__proto__ = null; // Die Prototypenkette endet hier // **Beachten Sie hier den Unterschied zwischen Foo und Function, Foo ist eine Instanz von Function**

// Beginnen Sie mit der Analyse dieses klassischen Graphen in der Mitte Function Object() Function Object()
let o1 = neues Objekt();
let o2 = neues Objekt();

o1.__proto__ = Objekt.prototyp; // Regel 2
o2.__proto__ = Objekt.prototyp; // Regel 2
Object.prototype.__proto__ = null; // Die Prototypenkette endet hier Object.prototype.constructor = Object; // Regel 1
Object.__proto__ = Function.prototype // Prinzip 2 (Objekt ist im Wesentlichen eine Funktion);
// Das ist etwas verwirrend. Object ist im Wesentlichen eine Funktion und Function ist im Wesentlichen ein Objekt. Function.prototype.__proto__ = Object.prototype; // Regel 2 (Function.prototype ist auch ein normales Objekt, daher gilt Regel 2)
Object.prototype.__proto__ = null; // Die Prototypenkette endet hier // Beginnen Sie mit der Analyse dieses klassischen Diagramms von Function Function() unter Function Function()
Funktion.__proto__ = Funktion.prototyp // Regel 2
Function.prototype.constructor = Funktion; // Regel 1

Daraus können wir schließen, dass mit Ausnahme des Prototypobjekts von Object ( Object.prototype ), dessen __proto__ auf null zeigt, die Prototypobjekte anderer integrierter Funktionsobjekte (zum Beispiel: Array.prototype) und __proto__ benutzerdefinierter Konstruktoren alle auf Object.prototype zeigen, weil das Prototypobjekt selbst ein gewöhnliches Objekt ist. Im Augenblick:

Objekt.prototype.__proto__ = null;
Array.prototype.__proto__ = Objekt.prototype;
Foo.prototype.__proto__ = Objekt.prototype;

2: Was bedeuten Prototypen und Prototypenketten?

Nachdem wir diese Gleichheitsbeziehungen verstanden haben, wollen wir darüber nachdenken, was Prototyp und Prototypenkette bedeuten. Die Funktion des Prototypobjekts besteht darin, die allen Instanzen gemeinsamen Eigenschaften und Methoden zu speichern, wodurch der Speicherverbrauch erheblich reduziert werden kann.

Nehmen Sie als Beispiel Person -Konstruktor und die Person01-Instanz am Anfang unseres Artikels:

console.log(person01)

Drucken Sie person01 , er hat seine eigenen Attribute Name = ,Xiaoming‘, Alter = 18; gleichzeitig hat er durch die Prototyp-Kettenbeziehung das Attribut Mutterland = ,China‘;

Erstellen wir eine Person2-Instanz

let person02 = neue Person('Xiaohua', 20);
console.log(person02)

Drucken Sie person02 , es hat seine eigenen Attribute name = ,Xiaohua‘, age = 20; gleichzeitig hat es durch die Prototypkettenbeziehung das Attribut motherland = 'China' ; können Sie sehen, dass das Prototypobjekt das Attribut motherland = 'China' speichert, das von person01 und person02 gemeinsam genutzt wird. Wir müssen das motherland-Attribut nicht jeder Instanz hinzufügen, sondern können dieses Attribut in ihrem Konstruktor-Prototypobjekt speichern, für den Konstruktor der menschlichen Person. Es gibt viele identische Eigenschaften und Methoden. Wir haben zum Beispiel alle schwarze Haare und wir haben alle Methoden wie Essen und Schlafen. Je mehr identische Eigenschaften und Methoden es gibt, desto größer ist die Bedeutung des Prototyps und der Prototypenkette. Dann können wir es so machen

Person.prototype.hairColor = "schwarz";
Person.prototype.eat = function(){
    console.log('Normalerweise essen wir drei Mahlzeiten am Tag.')
}
console.log(person01)
console.log(person02)

Wenn wir zu diesem Zeitpunkt person01 und person02 erneut drucken, sind wir angenehm überrascht, dass sie das Attribut hairColor und eat Methode haben; die Instanzen erhalten dynamisch die Attribute und Methoden, die nach Person Konstruktor hinzugefügt wurden. Das ist die Bedeutung von Prototypen und Prototypenketten! Kann dynamisch abgerufen werden, wodurch Speicher gespart werden kann.

Eine weitere Sache, die wir beachten sollten, ist: Wenn Person01 sich die Haare gelb färben würde, welche hairColor hätte sie?

person01,Haarfarbe = "gelb";
console.log(person01)
console.log(person02)

Es ist ersichtlich, dass die Haarfarbe von person01 hairColor = 'yellow' und die Haarfarbe von person02 hairColor = 'black' ist; das Instanzobjekt überschreibt die vom Prototyp geerbten Attribute und Methoden, was „Eigenschaftenüberschreibung und Eigenschaftsabschirmung“ entspricht. Dieser Vorgang ändert die Eigenschaften und Methoden des Prototyps nicht und ändert natürlich auch nicht andere vom vereinheitlichten Konstruktor erstellte Instanzen. Nur durch Ändern der Eigenschaften und Methoden des Prototypobjekts können die Eigenschaften und Methoden geändert werden, die von anderen Instanzen über die Prototypkette erhalten werden.

Dies ist das Ende dieses Artikels zum Verständnis der JS-Prototyp-Prototypkette. Weitere relevante Inhalte zur JS-Prototyp-Prototypkette finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!