Detaillierte Erläuterung der Wissenspunkte zu JavaScript-Prototypen und Prototypketten

1. Prototyp

1. Konzept

In JavaScript ist eine Funktion ein Objekt vom Typ Function das Eigenschaften und Methoden enthält. Der Prototyp (Prototype) ist ein Attribut Function .

Das prototype ist bei der Definition der Funktion enthalten und sein Anfangswert ist ein leeres Objekt. Für Funktionen in JavaScript ist kein Prototyptyp definiert, daher kann der Prototyp einen beliebigen Typ haben.

Der Prototyp wird verwendet, um die gemeinsamen Eigenschaften und Methoden des Objekts zu speichern . Die Eigenschaften und Methoden des Prototyps haben keinen Einfluss auf die Eigenschaften und Methoden der Funktion selbst.

// Eigenschaften des Funktionstyps -> Eigenschaften, die alle Funktionen haben console.log(Function.prototype); //[Funktion]

//Funktion definieren function fn() {
    console.log('das ist eine Funktion');
}

//Der Standardwert des Prototyps ist das leere Objekt console.log(fn.prototype); //fn {}

// Die Funktion enthält einen Konstruktor -> alle Referenztypen sind tatsächlich Konstruktoren console.log(Number.prototype); //[Number: 0]

console.log(Object.prototype);//{}

2. Abrufen des Prototyps

Sie können den Prototyp des Objekts auf zwei Arten abrufen, um gemeinsame Eigenschaften und Methoden festzulegen:

• über prototype Attribut des Konstruktors
• und über getPrototype der Object-Objekt-Methode (obj).

Funktion fn() {
    console.log('das ist eine Funktion');
}

//Verwenden Sie die Attributsyntaxstruktur des Zugriffsobjekts console.log(fn.prototype); //fn {}
console.log(fn['prototype']);//fn {}

//Objekttyp stellt die getPrototypeOf()-Methode bereit console.log(Object.getPrototypeOf(fn)); //[Funktion]

3. Verstehen Sie das Konstruktorattribut des Funktionsprototyps.

Object.getOwnPropertyDescriptors() wird verwendet, um die Deskriptoren aller eigenen Eigenschaften eines Objekts abzurufen.

var result = Object.getOwnPropertyDescriptor(Object.prototype,'constructor');
console.log(result) //Die Ausgabeergebnisse lauten wie folgt:
//{
// Wert: [Funktion: Objekt],
// beschreibbar: wahr,
// aufzählbar: falsch,
// konfigurierbar: wahr
// }

constructor是在创建函数的时候自动添加的，指向构造函数本身

. 4. Festlegen der Eigenschaften und Methoden für den Prototyp

Sie können die Eigenschaften und Methoden des Prototyps auf die folgenden zwei Arten festlegen:

• Die Eigenschaften und Methoden von Der Prototyp wird separat definiert.

Constructor.prototype.Attribute name = Attributwert; Constructor.prototype.Method name = function(){};

• Definieren Sie direkt ein neues Objekt für den Prototyp.

Wenn wir dem Prototyp viele Attribute hinzufügen müssen, ist es zu mühsam,构造函数.prototype.属性名immer wieder zu schreiben. Wir können den gesamten prototype

„constructor.prototype = {“

    Attributname: Attributwert,
    Methodenname: function(){}}

function foo () {}foo.prototype = {
    Konstruktor: foo,
    Name: 'Marmelade',
    Alter: 18,
    Adresse: 'Beijing'}var fn = new foo()console.log(fn.address) //Peking

5.isPrototypeOf()-Methode

Jedes Objekt verfügt über eine isPrototypeOf() -Methode, mit der ermittelt wird, ob das Objekt vorhanden ist ein Prototyp eines anderen Objekts.

Der Beispielcode lautet wie folgt:
// Definiere das Objekt durch den Initialisierer var obj = {
    Name:'Marmelade'
}
//Konstruktorfunktion Hero() definieren {}
// Ordne das Objekt obj dem Prototyp des Konstruktors Hero Hero.prototype = obj;
// Objekt über Konstruktor erstellen var hero = new Hero();

// Die Methode isPrototypeOf() bestimmt, ob das angegebene Objekt der Prototyp eines anderen Objekts ist var result = obj.isPrototypeOf(hero);
console.log(result);//true

überprüft, ob obj Objekt der Prototyp hero -Objekts ist

2. Prototypenkette

1. Verständnis der Prototypenkette

Als nächstes verwenden wir einen Code, um unser Verständnis der Prototypenkette zu erweitern:

Szenario : Suchen Sie die Objekte im obj-Objekt. Schritte, die vom Adressattribut js ausgeführt werden:
    1. Der Get-Vorgang wird ausgelöst. 2. Durchsuchen Sie das Attribut im aktuellen Objekt. 3. Wenn es nicht gefunden wird, wird zu diesem Zeitpunkt im Objekt der Prototypkette (__proto__) gesucht Wenn es nicht gefunden wird, wird die Suche entlang der Prototypenkette fortgesetzt, bis der Prototyp der obersten Ebene gefunden wird (was der Prototyp der obersten Ebene ist, ist vorübergehend unklar).

1.1 Der Beispielcode lautet wie folgt:

var obj = {
    Name: 'Marmelade',
    Alter: 19
}
/* 
    Anforderung: Suchen Sie das Adressattribut im obj-Objekt*/

// Die Prototypenkette wird Schicht für Schicht durchsucht. Wenn sie nicht gefunden wird, wird sie durchsucht, bis der Prototyp der obersten Ebene gefunden wird.
obj.__proto__.__proto__ = {}
obj.__proto__.__proto__.__proto__ = {
    Adresse: „Peking“
}

console.log(obj.address) // Beijing console.log(obj.__proto__.__proto__.__proto__) // { Adresse: 'Beijing' }

1.2 Speicherzuordnung

Finden Sie schließlich das Adressattribut
那么这里有一个问题，如果一直没有查到，会无穷尽的去查找吗？接下来我们就来了解一下

2. Was ist der Top-Level-Prototyp?

Wie oben erwähnt, werden wir nicht endlos entlang der Prototypenkette suchen. Wenn der Prototyp der obersten Ebene gefunden wird, wird undefined zurückgegeben, wenn er noch nicht gefunden wurde.

Was ist also der Top-Level-Prototyp?
Der Beispielcode lautet wie folgt:

var obj = { name: 'jam' }console.log(obj.__proto__) // {}console.log(obj.__proto__.__proto__) //

Der Prototyp des Nullliteralobjekts obj ist: {} . {} ist der Prototyp der obersten Ebene. Wenn wir __proto__ weiter nach oben drucken, wird ein Nullwert zurückgegeben, der beweist, dass die vorherige Ebene bereits der Prototyp der obersten Ebene

ist fehlt im ersten Codeteil:

顶层原型就是Object.prototype

3. Der Prototyp des Objekts (Object.prototype)

3.1 Wo ist also das Ende der Prototypenkette? Verfügt das dritte Objekt beispielsweise auch über ein Prototyp-Attribut __proto__ ?

var obj = {name:'jam'}obj.__proto__ = {}obj.__proto__.__proto__ = {}obj.__proto__.__proto__.__proto__ = {}console.log(obj.__proto__.__proto__.__proto__.__proto__) // {}

Wir haben festgestellt, dass das oben gedruckte Ergebnis空对象{}

• Tatsächlich ist dieser Prototyp unser Prototyp der obersten Ebene.

  var obj = {
    Name: 'Marmelade',
    Alter: 19
    }
    console.log(obj.__proto__) // {}
    console.log(Object.prototype) // {}
    console.log(obj.__proto__ === Object.prototype) // true

  Object ist die übergeordnete Klasse aller Klassen, also ist obj.__proto__ tatsächlich Object.prototype,
  console.log(obj.__proto__ === Object.prototype) // true wir können sehen, dass das Ergebnis Object.prototype der Prototyp der obersten Ebene ist.

• Die Prototypen von Objekten, die direkt aus Object erstellt wurden, sind {}

3.2 Dann können wir fragen : {} Gibt es etwas Besonderes an Prototypen?

• Besonderheit 1: Das Objekt hat ein Prototypattribut, aber sein Prototypattribut zeigt bereits auf null, das heißt, es ist der Prototyp der obersten Ebene

  console.log(obj.__proto__.__proto__.__proto__.__proto__.__proto__) // null

• Besonderer Punkt 2: Es gibt viele Standardeigenschaften und -methoden für dieses Objekt.
  • Obwohl das Ergebnis des Druckens Object.prototype ein leeres Objekt {} ist, sind die darin enthaltenen Eigenschaften nicht aufzählbar. Lassen Sie uns beispielsweise constructor drucken Zu sehende Eigenschaft

    <!-- Es ist ersichtlich, dass es ein Konstruktorattribut gibt und es nicht leer ist -->console.log(Object.prototype.constructor) // [Funktion: Objekt] <!-- Konstruktor verweist zurück auf Object -->

  • us Sie können die Deskriptoren aller eigenen Eigenschaften in Object.prototype auch über die Methode Object.getOwnPropertyDescriptors() abrufen.

    console.log(Object.getOwnPropertyDescriptors(Object.prototype)) //Wie im langen Screenshot unten gezeigt

    

4. Prototyp-Kettenbeziehungs-Gedächtnisdiagramm