JS-Kernserie: Eine kurze Diskussion über Prototypobjekte und Prototypketten

In Javascript ist alles ein Objekt, aber Objekte sind auch unterschiedlich und können grob in zwei Kategorien unterteilt werden, nämlich: gewöhnliche Objekte (Object) und Funktionsobjekte (Function).

Im Allgemeinen sind die durch die neue Funktion generierten Objekte Funktionsobjekte und andere Objekte sind gewöhnliche Objekte.

Beispiel:

function f1(){
    //todo
}
var f2 = function(){
    //todo
};
var f3 = new Function('x','console.log(x)');

var o1 = {};
var o2 = new Object();
var o3 = new f1();

console.log(
    typeof f1,//function
    typeof f2,//function
    typeof f3,//function
    typeof o1,//object
    typeof o2,//object
    typeof o3 //object
);
>> function function function object object object

f1 gehört zur Deklaration einer Funktion. Die häufigste Art, eine Funktion zu definieren, ist, dass f2 tatsächlich eine anonyme Funktion ist und gehört zur Funktion f3 ist nicht üblich, aber es ist auch ein Funktionsobjekt.

Funktion ist ein Objekt, das mit JS geliefert wird. Wenn f1 und f2 erstellt werden, erstellt JS diese Objekte automatisch durch new Function().

Es gibt zwei Möglichkeiten, Objekte in Javascript zu erstellen: Objektliterale und die Verwendung neuer Ausdrücke. Konzentrieren wir uns auf diese beiden Methoden, wenn Sie Java- und C#-Ideen verwenden. o3 ist ein Instanzobjekt von f1, und o3 und f1 sind vom gleichen Typ, aber das stimmt nicht...

Wie verstehst du das? Sehen Sie, ob o3 übergeben wird new Funktion Was offensichtlich nicht generiert wird, da es sich nicht um ein Funktionsobjekt handelt, sondern um ein gewöhnliches Objekt.

Nach einem einfachen Verständnis von Funktionsobjekten und gewöhnlichen Objekten werfen wir einen Blick auf den Prototyp und die Prototypenkette in Javascript:

In JS wird jedes Mal, wenn ein Funktionsobjekt f1 erstellt wird, das Es gibt Einige in das Objekt integrierte Attribute, einschließlich Prototyp und __proto__, sind Prototypobjekte, die einige Attribute und Methoden von f1 aufzeichnen.

Es ist zu beachten, dass der Prototyp für f1 unsichtbar ist, d. h. f1 sucht nicht nach den Eigenschaften und Methoden im Prototyp.

function f(){}
f.prototype.foo = "abc";
console.log(f.foo); //undefined

Was nützt ein Prototyp? Tatsächlich ist die Hauptfunktion des Prototyps die Vererbung. Laienhaft ausgedrückt sind die im Prototyp definierten Eigenschaften und Methoden für seine eigenen „Nachkommen“ reserviert. Daher können Unterklassen vollständig auf die Eigenschaften und Methoden im Prototyp zugreifen.

Um zu wissen, wie f1 den Prototypen in JS überlässt, müssen wir die Prototypenkette in JS verstehen. Dieser Typ sieht auch sehr seltsam aus tief, daher sieht man es oft nicht, aber es existiert sowohl in gewöhnlichen Objekten als auch in Funktionsobjekten. Seine Funktion besteht darin, das Prototypobjekt der übergeordneten Klasse zu speichern. Wenn JS ein Objekt durch den neuen Ausdruck erstellt, ist es normalerweise der Prototyp Die übergeordnete Klasse wird dem __proto__-Attribut des neuen Objekts zugewiesen und bildet so eine Generationenvererbung...

function f(){}
f.prototype.foo = "abc";var obj = new f();
console.log(obj.foo); //abc

Jetzt wissen wir, dass __proto_ in obj _Was gespeichert wird, ist das Prototyp von f, was ist also im Prototyp von f gespeichert? Schauen Sie sich das Bild unten an:

Wie im Bild gezeigt, speichert f Object.prototype und das Object.prototype-Objekt haben auch __proto__. Aus den Ausgabeergebnissen ist Object.prototype.__proto__ null, was das Ende der obj-Objektprototypkette angibt. Wie in der folgenden Abbildung gezeigt:

Nachdem das obj-Objekt über eine solche Prototypenkette verfügt, sucht obj bei der Ausführung von obj.foo zunächst, ob es dieses Attribut hat, aber wird nicht nach dem eigenen Prototyp suchen, wenn foo nicht gefunden werden kann, sucht obj entlang der Prototypenkette...

Im obigen Beispiel haben wir das foo-Attribut für den Prototyp von f definiert und dann wird obj diese Eigenschaft verwenden in der Prototypenkette gefunden und ausgeführt werden.

Fassen Sie abschließend die wichtigsten Punkte dieses Artikels in wenigen Sätzen zusammen:

1. Die Bildung der Prototypenkette hängt wirklich davon ab on_ _proto__ statt Prototyp. Wenn die JS-Engine die Methode eines Objekts ausführt, prüft sie zunächst, ob die Methode im Objekt selbst vorhanden ist. Wenn sie nicht vorhanden ist, sucht sie in der Prototypkette, nicht jedoch in ihrem eigenen Prototyp.

2. Das __proto__ eines Objekts zeichnet seine eigene Prototypenkette auf und bestimmt seinen eigenen Datentyp. Das Ändern von __proto__ entspricht dem Ändern des Datentyps des Objekts.

3. Der Prototyp einer Funktion gehört nicht zu seiner eigenen Prototypenkette. Er ist der Kern der Unterklassenerstellung, bestimmt den Datentyp der Unterklasse und ist die Brücke, die die Prototypenkette verbindet der Unterklasse.

4. Der Zweck der Definition von Methoden und Eigenschaften für das Prototypobjekt besteht darin, von Unterklassen geerbt und verwendet zu werden.