Zwei Bilder von JavaScript zum Verständnis der Prototypenkette

Vorwort:

In unserem vorherigen Artikel haben wir JavaScript-Prototypen vorgestellt. Warum stellen wir nicht gemeinsam die Prototypenkette vor? Da die Prototypenkette in JavaScript ein schwieriger Punkt und eine Frage ist, die in einem Interview unbedingt gestellt werden muss, wollen wir sie jetzt lernen.

1. Prototyp-Beziehung

Jede Funktion in JavaScript hat eine Prototypeigenschaft, die einen Prototyp zurückgibt, und der Prototyp hat eine constructor , die auf die damit verbundene Konstruktorfunktion verweist. Ein von einem Konstruktor instanziiertes Objekt verfügt über ein __proto__ Attribut, __proto__ auf denselben Speicher verweist wie der Prototyp des Konstruktors.

Es ist erwähnenswert, dass das Attribut __proto__ im Standard gelöscht wurde Object.getPrototypeOf(object)和Object.setPrototypeOf(object, prototype) verwendet werden.

Testen wir nun die Beziehung zwischen dem Objektkonstruktor und dem Prototyp. Der Beispielcode lautet wie folgt:

// Erstens ist Object eine Konstruktorfunktion und hat daher eine Prototypeigenschaft. var result = Object.prototype
console.log(Ergebnis) // Holen Sie sich ein Prototypobjekt/*
 * Die Konstruktor-Eigenschaft des Prototyp-Objekts -> gibt den damit verbundenen Konstruktor zurück * Object.getPrototypeOf(result) gibt den Prototyp zurück, der auf den Konstruktor zeigt
 */
var result2 = result.constructor
console.log(result2) // [Funktion: Objekt]
var result3 = Object.getPrototypeOf(Ergebnis)
console.log(result3) // null

Das Diagramm ist unten dargestellt:

Wenn wir den Prototyp von Object.prototype über Object.getPrototypeOf(Object.prototype) erhalten, ist der zurückgegebene Wert null, was bedeutet, dass wir die Suche beenden können, nachdem wir Object.prototype gefunden haben.

2. Prototypenkette

Um uns das Verständnis von Prototypenverkettung zu erleichtern, werfen wir zunächst einen Blick auf den folgenden Code:

Funktion Person(Name) {
  dieser.name = Name
}

var PP = Person.prototype
var PPC = PP.Konstruktor
// Überprüfen Sie, ob es mit dem Konstruktor identisch ist console.log(PPC === Person) // true

// Person instanziieren
var person = neue Person('Yiwan Zhou')
// Holen Sie sich den Prototyp des instanziierten Person-Objekts var pP = Object.getPrototypeOf(person)
// Überprüfen Sie, ob der Prototyp des instanziierten Person-Objekts auf den Prototyp des Konstruktors verweist
konsole.log(pP === PP) // wahr

Tatsächlich werden alle Konstruktoren standardmäßig von Object geerbt, wie im folgenden Code getestet:

// Holen Sie sich den Prototyp von Person.prototype var PPP = Object.getPrototypeOf(PP)
var OP = Objekt.prototyp
// Prüfen, ob beide gleich sind console.log(PPP === OP) // true

Der obige Code ist nicht ganz klar, deshalb habe ich zum besseren Verständnis ein Bild gezeichnet:

Die rote Linie im obigen Bild ist die Prototypenkette. Die Prototypenkette zeigt auf die Beziehung im Prototyp, bis das Endergebnis null ist, also Object.prototype . Die Prototypenkette endet, was bedeutet, dass **Object.prototype** der Endpunkt in der Prototypenkette ist.

Wir können Object.setPrototypeOf(obj, prototype) verwenden, um die Prototypkette mit spezifischem Inhalt festzulegen. Allerdings ist dies nicht zu empfehlen, wenn es nicht notwendig ist, da es sehr leistungsintensiv ist.

3. Fazit

Anhand von zwei Bildern wird die Beziehung zwischen Prototypen in JavaScript und was die Prototypenkette ist, erklärt. Abschließend wird der Endpunkt der Prototypenkette vorgestellt.

Damit ist dieser Artikel zum Verständnis der Prototypenkette in JavaScript mit zwei Bildern abgeschlossen. Weitere Informationen zur JavaScript-Prototypenkette finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!