Heim > Web-Frontend > js-Tutorial > Hauptteil

Die ausführlichste Einführung in den JS-Prototyp und die Prototypenkette

零到壹度
Freigeben: 2018-04-13 16:47:46
Original
1606 Leute haben es durchsucht

Was dieser Artikel mit Ihnen teilt, ist die detaillierteste Einführung in JS-Prototypen und Prototypketten. Er hat einen gewissen Referenzwert.

1.

Wenn JS ein Objekt erstellt (sei es ein normales Objekt oder ein Funktionsobjekt), gibt es eine integrierte Eigenschaft namens __proto__, die auf das Prototypobjekt des Konstruktors verweist, der es erstellt hat.
Das Objekt person1 hat ein __proto__-Attribut, der Konstruktor, der es erstellt, ist Person, und das Prototypobjekt des Konstruktors ist Person.prototype, also:
person1.__proto__ == Person.prototype

Bitte beachten Sie die Bild unten:

Abbildung 6-1 von „JavaScript Advanced Programming“

Gemäß dem obigen Verbindungsdiagramm erhalten wir:

Person.prototype.constructor == Person;
person1.__proto__ == Person.prototype;
person1.constructor == Person;
Nach dem Login kopieren

Der wirklich wichtige Punkt, der klargestellt werden muss, ist jedoch, dass diese Verbindung zwischen der Instanz (person1) und dem Prototypobjekt (Person) des Konstruktors (Person.prototype) besteht, nicht zwischen dem Instanz (< Zwischen 🎜>) und Konstruktor (person1). Person

Hinweis: Da die meisten Browser das __proto__-Attribut unterstützen, wurde es zu ES6 hinzugefügt (einige ES5-Browser unterstützen es auch, aber es ist noch kein Standard).

2. Konstruktor

Jeder, der mit Javascript vertraut ist, weiß, dass wir ein Objekt wie dieses erstellen können:


var obj = {}
Nach dem Login kopieren
Es entspricht dem Folgenden:


var obj = new Object()
Nach dem Login kopieren
obj ist eine Instanz des Konstruktors (Object). Also:


obj.constructor === Object
obj.__proto__ === Object.prototype
Nach dem Login kopieren
Das neue Objekt obj wird mit dem neuen Operator erstellt, gefolgt von einem

Konstruktor. Der Konstruktor (Objekt) selbst ist eine Funktion (das oben erwähnte Funktionsobjekt), die dem oben genannten Konstruktor Person ähnelt. Diese Funktion ist lediglich zum Zweck der Erstellung neuer Objekte definiert. Lassen Sie sich also von Object nicht einschüchtern.


In ähnlicher Weise sind die Konstruktoren, die Objekte erstellen können, nicht nur Objekte, sondern auch Array, Datum, Funktion usw.

Wir können also auch Konstruktoren verwenden, um Array, Datum und Funktion zu erstellen

var b = new Array();
b.constructor === Array;
b.__proto__ === Array.prototype;var c = new Date(); 
c.constructor === Date;
c.__proto__ === Date.prototype;var d = new Function();
d.constructor === Function;
d.__proto__ === Function.prototype;
Nach dem Login kopieren
Diese Konstruktoren sind Funktionsobjekte:

Funktionsobjekte

3. Prototypenkette

Schnelltest zur Überprüfung Ihres Verständnisses:

  1. Was ist das? person1.__proto__

  2. Was ist das? Person.__proto__

  3. Was ist das? Person.prototype.__proto__

  4. Was ist das? Object.__proto__

  5. Was ist das? Object.prototype__proto__

Antwort:

Erste Frage:
Weil
person1.__proto__ === person1 的构造函数.prototypeWeil
person1的构造函数 === PersonSo
person1.__proto__ === Person.prototype

Zweite Frage:

Weil
Person.__proto__ === Person的构造函数.prototype Weil
Person的构造函数 === Function also
Person.__proto__ === Function.prototype

Frage 3:


ein gewöhnlicher Gegenstand ist, dem wir keine Aufmerksamkeit schenken müssen Welche Eigenschaften es hat, denken Sie daran, dass es ein normales Objekt ist. Person.prototypeWeil der Konstruktor eines normalen Objekts === Objekt
also
Person.prototype.__proto__ === Object.prototype

Beziehen Sie sich für die vierte Frage auf die zweite Frage, da Person und Objekt beide Konstruktoren sind

Frage 5: Das


-Objekt hat auch das Object.prototypeproto-Attribut, aber es ist etwas Besonderes und null. Da null an der Spitze der Prototypenkette steht, kann dies nur im Gedächtnis gespeichert werden.
Object.prototype.__proto__ === null

Das obige ist der detaillierte Inhalt vonDie ausführlichste Einführung in den JS-Prototyp und die Prototypenkette. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage