Detaillierte Erklärung der JavaScript-Prototypenkette

Detaillierte Erklärung der JavaScript-Prototypenkette

1. Konstruktoren und Instanzen

Angenommen, Sie deklarieren eine Methode namens Foo() , dann können wir eine Instanz über new Foo() deklarieren.

    Funktion Foo() {
      console.log("Ich bin ein Konstruktor");
    }
    const f1 = neues Foo();

Jetzt können Sie deutlich sehen, dass Foo() der Konstruktor und f1 seine Instanz ist.

2. Eigenschaftsprototyp

Foo() Konstruktor ist eine Methode.

Methoden sind ebenfalls vom Objektdatentyp, daher können wir sagen, dass eine Methode ein Objekt ist.

Objekte haben Eigenschaften, aber Methoden haben ihre eigene spezielle Eigenschaft namens prototype , die andere Objekte nicht haben.

Diese Eigenschaft verweist auf ein Prototypobjekt ( Foo.prototype ), das wiederum über eine eigene Eigenschaft namens constructor verfügt, die einen Zeiger zurück auf den ursprünglichen Konstruktor enthält.

   Funktion Foo() {
      console.log("Ich bin ein Konstruktor");
    }
    const f1 = neues Foo();

    console.log(Foo.prototype); //Foo's Prototypobjekt console.log(f1.prototype); //f1 ist nicht unterfüttert


3. Eigenschaft __proto__

prototype bietet gemeinsame Methoden und Eigenschaften für alle Instanzen des Konstruktors.

Wie greifen Instanzen auf gemeinsame Methoden und Eigenschaften zu?

Die f1-Instanz hat keinen prototype , aber ein Attribut __proto__, das eine Eigenschaft aller Objekte ist. Es zeigt auf das Prototypobjekt, das seinen eigenen Konstruktor erstellt. Dann verwendet die js-Sprache dieses Attribut, um Instanzen den Zugriff auf gemeinsame Eigenschaften und Methoden zu ermöglichen.

Foo ist der Konstruktor von f1, Foo.prototype ist das Prototypobjekt von Foo , also zeigt f1.__proto__ auf Foo.prototype

    Funktion Foo() {
      console.log("Ich bin ein Konstruktor");
    }

    const f1 = neues Foo();

    Konsole.log(Foo.prototype);
    Konsole.log(f1.__proto__);


4. Zugriff auf Methoden in Prototypen

Wenn der Foo-Konstruktor möchte, dass seine Instanzen dieselben Eigenschaften haben, wie etwa name , fügt er diese seinem Prototypobjekt hinzu.

   Funktion Foo() {
      console.log("Ich bin eine Methode");
    }

    Foo.prototype.name = „Ich bin eine Eigenschaft, die von von Foo erstellten Instanzen gemeinsam genutzt wird“;

    const f1 = neues Foo();
    const f2 = neues Foo();

    console.log(f1.name);//Ich bin eine gemeinsame Eigenschaft der von Foo erstellten Instanz console.log(f2.name);//Ich bin eine gemeinsame Eigenschaft der von Foo erstellten Instanz 

5. Konstruktoren haben auch __proto__

Oben steht, dass alle Objekte __proto__ haben. Foo ist sowohl eine Funktion als auch ein Objekt, was ist also Foo.__proto__ ?

Dann wollen wir herausfinden, wer der Konstruktor von Foo ist. Foo ist eine Funktion mit funktionsspezifischen Methoden und Eigenschaften. Sein Konstruktor ist Function, ein integrierter Konstruktor von js. Sein Function.prototype stellt einige öffentliche Methoden und Eigenschaften der Funktion für alle Funktionen bereit, die Sie in js erstellen.

Also zeigt Foo.__proto__ auf Funtion.prototype

6. Der Prototyp des Konstruktors hat auch __proto__

Foo.prototype ist auch ein Objekt und hat daher auch __proto__。

Wenn wir nach __proto__, müssen wir dessen Konstruktor finden. Foo.prototype ist ein Objekt, ein reines Objekt, also ist sein Konstruktor Object, und der Prototyp von Object ist dann Object.prototype。

Foo.prototype.__proto__ zeigt auf Object.prototype

7. Object.prototype ist ein ganz besonderes Prototypobjekt

Konstruktoren wie Array , String , Funtion und Object sind alles Funktionen.
Sie sind alle Instanzen des Funtion-Konstruktors.
Array.__proto__ , String.__proto__ , Funtion.__proto__ , Object.__proto__ zeigen auf Funtion.prototype -Prototyp,
Sie können einige öffentliche Methoden Funtion.prototype -Prototyps aufrufen.
Sie können beispielsweise name aufrufen, um den Namen Ihrer Funktion anzuzeigen.

Array.prototype , String.prototype , Funtion.prototype , diese Prototypobjekte sind alle Objekte.
sind alle Instanzen des Objektkonstruktors.
Array.prototype.__proto__ , String.prototype.__proto__ , Funtion.prototype.__proto__ zeigen auf den Object.prototype -Prototyp.
Sie können also die öffentliche Methode des Prototypobjekts Object.prototype aufrufen,

Object.prototype ist etwas Besonderes. Obwohl es ein Objekt ist, ist es keine Instanz von Object selbst.
Object.prototype.__proto__ zeigt auf null, was den Endpunkt der Prototypenkette darstellt

8. Zusammenfassung

Nur Methoden, also Funktionen, haben prototype , die die Prototypen von Methoden sind.
Daher verfügt eine Instanz im Allgemeinen über eine entsprechende Konstruktionsmethode, nämlich den Konstruktor, und __proto__ der Instanz zeigt auf den Prototyp der Konstruktionsmethode.
js verfügt über viele integrierte Konstruktionsmethoden wie Array , String , Funtion und Object , die alle entsprechend einigen Objekttypen von js zugewiesen sind, und ihre Prototypen bieten viele gekapselte gemeinsame Methoden.
Alle Konstruktionsmethoden sind selbst Funktionen, die Instanzen des in js integrierten Konstruktors Funtion sind.
Mit Ausnahme von Object.prototype sind die Prototypen aller Konstruktionsmethoden selbst Objekte, die Instanzen des mit js gelieferten Objektkonstruktors sind.
Object.prototype.__prototype zeigt auf null, den Endpunkt der Prototypenkette.

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der JavaScript-Prototypenkette. Weitere relevante Inhalte zur JavaScript-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!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung des JavaScript-Prototyps und Beispiele
  • Zwei Bilder von JavaScript zum Verständnis der Prototypenkette
  • Details zum JavaScript-Prototyp
  • Details zum JavaScript-Prototyp und zur Prototypkette
  • Details zum Prototypmodus des Javascript-Entwurfsmusters
  • Wissen Sie, was ein JavaScript-Prototyp ist?

<<:  Die Iframe-Aktualisierungsmethode ist bequemer

>>:  Beispielcode zur Implementierung einer Pivot-Tabelle in MySQL/MariaDB

Artikel empfehlen

Details zur Überwachung von DOM-Elementen durch MutationObServer in JavaScript

1. Grundlegende Verwendung Es kann über den Mutat...

Beispiel für den Export und Import von Docker-Containern

Inhaltsverzeichnis Docker-Container exportieren D...

Linux-Befehl „cut“ erklärt

Der Cut-Befehl in Linux und Unix dient dazu, aus ...

So lösen Sie das Problem ERROR 2003 (HY000) beim Starten von MySQL

1. Problembeschreibung Beim Starten von MySQL tri...

JS realisiert Video-Sperreffekt

Verwenden Sie um dies zu erreichen, die modulare ...

Vue implementiert dreidimensionales Säulendiagramm basierend auf E-Charts

Das dreidimensionale Säulendiagramm besteht aus d...

Analyse der Gründe, warum das MySQL-Indexsystem den B + -Baum verwendet

Inhaltsverzeichnis 1. Was ist ein Index? 2. Warum...

Erste Schritte Tutorial für Anfänger: Domänennamenauflösung und Bindung

Wie können Sie also nach der Registrierung eines ...

Front-End-JavaScript-Funktionsprinzip

Inhaltsverzeichnis 1. Was ist eine JavaScript-Eng...

Schritte zum Erstellen der MHA-Architekturbereitstellung in MySQL

Inhaltsverzeichnis MAH 1. Einführung in die MAH-A...