Handschriftliche Implementierung von new in JS

⚠ Voraussetzungen:

• Prototypen und Prototypenketten verstehen
• Verstehen dieser Bindung

1 Einführung in den neuen Operator

MDN-Dokumentation: Der new Operator erstellt eine Instanz eines benutzerdefinierten Objekttyps oder eine Instanz eines integrierten Objekts mit einem Konstruktor.

Klasse Person {
    Konstruktor(Name) {
        dieser.name = Name;
    }
}
//Eine Instanz eines benutzerdefinierten Objekttyps erstellen const person = new Person('Xiao Ming')
//Erstellen Sie eine Instanz eines integrierten Objekts mit einem Konstruktor const date = new Date()

Die Rolle von new: Erstellen Sie eine Instanz eines Objekts

2. Was hat „Neu“ bewirkt?

Oben wurde erwähnt, dass die Funktion von new darin besteht, eine Instanz eines Objekts zu erstellen. Wie erstellt es also eine Instanz und was macht es intern?

Nehmen wir als Beispiel new Person(). Bei der Ausführung passieren die folgenden Dinge:

Erstellen Sie ein leeres einfaches JS-Objekt

const obj = {}

Fügen Sie diesem Objekt das Attribut __proto__， hinzu und verknüpfen Sie das Attribut mit dem Prototypobjekt des Konstruktors

obj.__proto__ = Person.prototyp

Ruft den Konstruktor Person auf und bindet this an das neu erstellte Objekt obj

Person.apply(obj)

Wenn der Konstruktor nicht explizit ein Objekt zurückgibt, wird das neu erstellte Objekt zurückgegeben, d. h. obj

3 Simulieren Sie die Implementierung des neuen Operators

Wie oben erwähnt, führt der new Operator vier Dinge aus. Lassen Sie uns Funktionen verwenden, um die Implementierung von new gemäß diesen vier Schritten zu simulieren (handgeschriebener Code für das Interview).

const _new = Funktion(Konstruktor, ...Argumente) {
    const obj = {}
    obj.__proto__ = Konstruktor.Prototyp
    const res = Konstruktor.anwenden(obj, args)
    // Dieser Schritt wird im Detail unter „Ergänzung“ erklärt return res instanceof Object ? res : obj
}

Der Code ist sehr einfach, folgen Sie einfach den obigen 4 Schritten und schreiben Sie ihn Schritt für Schritt

4 Ergänzung

ES5 bietet die Methode Object.create , die ein Objekt erstellen und die Eigenschaft __proto__ des neuen Objekts auf das vorhandene Objekt verweisen kann.

Mit dieser Methode können wir die Schritte 1 und 2 kombinieren.

const obj = Objekt.erstellen(Konstruktor.Prototyp)
//Entspricht const obj = {}
obj.__proto__ = Konstruktor.Prototyp

Erklären Sie für Schritt 4

• Wenn der Konstruktor (normalerweise) nicht explizit return , ist person das neu erstellte Objekt obj
• Wenn der Konstruktor kein Objekt zurückgibt, z. B. 1, "abc", dann ist person immer noch das neu erstellte Objekt obj

Funktion Person() {
    ...
   Rückgabe 1
}

Wenn der Konstruktor explizit ein Objekt zurückgibt, etwa {} , function() {}

Dann ist person nicht das neu erstellte Objekt obj , sondern das explizit return Objekt.

Funktion Person() {
  // Funktionen sind auch Objekte return function() {}
}

Die letzte Codezeile unserer _new-Funktion lautet also:

Gibt eine res-Instanz des Objekts zurück? res: obj

Hinweis: Der an die simulierte Funktion _new übergebene Parameter kann nur ein Konstruktor sein, keine Klasse

class Animal { ...}_new(Animal) // Meldet einen Fehler: Der Klassenkonstruktor Animal kann nicht ohne „new“ aufgerufen werden // Klassen können nur mit „new“ erstellt werden

Dies ist das Ende dieses Artikels über die handschriftliche Implementierung von Neuem in JS. Weitere relevante neue Inhalte in JS 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!