Grafiken und Texte erklären die Prototypobjekte und Prototyp -Ketten von JavaScript im Detail

Für Neuankömmlinge ist der JavaScript -Prototyp eine sehr problematische Sache. Erstens ist der Prototyp leicht zu verwechseln mit __Proto__, und zweitens sind die verschiedenen Richtungen zwischen ihnen wirklich kompliziert. Tatsächlich gibt es bereits viele Artikel auf dem Markt, die versuchen, es klar zu machen. Es gibt ein sogenanntes klassisches Bild mit verschiedenen Linien, die dieses und das verbinden. Um ehrlich zu sein, bin ich selbst sehr schwindelig, geschweige denn vollständig zu verstehen. Daher möchte ich es auch selbst versuchen, um festzustellen, ob ich die wichtigen Wissenspunkte im Prototypen trennen und es in der einfachsten Diagrammform eindeutig erklären kann.

Wir wissen, dass der Prototyp ein Objekt ist, durch das andere Objekte die Attributvererbung implementieren können. Aber zusätzlich zum Prototyp wird ein anderes __proto__ verwendet? Wie können die Leute es unterscheiden, wenn sie so ähnlich aussehen? Auf wen zeigen sie? Wie können Sie sich an das Chaos erinnern? Was zum Teufel ist die Prototypkette? Ich glaube, dass viele Anfänger, die sogar Erfahrung haben, es möglicherweise nicht vollständig erklären können. Im Folgenden sind drei einfache Bilder und einige Beispielcodes zu verstehen.

1. Der Unterschied zwischen Prototyp und __Proto__

 var a = {}; console.log (A.Prototype); //undefinedConsole.log(a.__Proto__); // Object {} var b = function () {} console.log (B.Prototyp); // b {} console.log (b .__ proto__); // function () {}

 /*1. Wörtliche Methode*/var a = {}; console.log (a .__ proto__); // Objekt {} console.log (a .__ proto__ === A.Constructor.Prototype); // true/*2. Konstruktormethode*/var a = function () {}; var a = new a (); console.log (a .__ proto__); // a {} console.log (a .__ proto__ === A.Constructor.Prototype); // true/*3. Object.create () Methode*/var a1 = {a: 1} var a2 = Object.create (a1); console.log (a2 .__ proto__); // Objekt {a: 1} console.log (a .__ proto__ === A.Constructor.Prototype); // falsch (dies ist die Ausnahme in Abbildung 1)

 var a = function () {}; var a = new a (); console.log (a .__ proto__); // a {} (d. H. Das Prototyp -Objekt der Konstruktorfunktion a) console.log (a .__ Proto __.__ proto__); // Objekt {} (d. H. Das Prototyp -Objekt des Konstruktorfunktionsobjekts) console.log (a .__ Proto __.__ Proto __.__ proto__); // null

Das obige dreht sich alles um diesen Artikel. In diesem Artikel werden drei Bilder verwendet, um die Prototypobjekte und Prototyp -Ketten von JavaScript zu erklären. Ich hoffe, es wird für alle hilfreich sein, wenn sie JavaScript lernen.