Manuelle Implementierung der Instanceof-Methode in JavaScript

1. Verwendung von instanceof

Mit instanceof wird erkannt, ob prototype Eigenschaft der Konstruktorfunktion in der Prototype-Kette eines Instanzobjekts vorkommt.

Funktion Person() {}
Funktion Person2() {}

const usr = neue Person();

console.log(usr-Instanz von Person); // wahr
console.log(usr-Instanz von Objekt); // wahr

console.log(usr-Instanz von Person2); // falsch

Wie im obigen Code gezeigt, werden zwei Konstruktoren, Person und Person2 , definiert und mit der new Operation ein Person Instanzobjekt usr erstellt.

Verwenden Sie instanceof um zu überprüfen, ob sich prototype Eigenschaft des Konstruktors in der Prototype-Kette der usr -Instanz befindet.

Natürlich zeigen die Ergebnisse, dass sich prototype Prototypeigenschaften von Person und Object in der Prototypkette von usr befinden. usr ist keine Instanz von Person2 , daher befindet sich prototype Eigenschaft von Person2 nicht in der Prototype-Kette von usr .

2. Implementierung von instanceof

Nachdem Sie die Funktion und das Prinzip von instanceof verstanden haben, können Sie eine Funktion mit derselben Funktion wie instanceof implementieren:

Funktion myInstanceof(Objekt, Konstruktor) {
    // impliziter Prototyp von obj let implicitPrototype = obj?.__proto__;
    // Konstruktor-Prototyp const displayPrototype = constructor.prototype;
    // Durchlaufe die Prototypenkette, während (implicitPrototype) {
        // Gefunden, returniere true
        wenn (implicitPrototype === displayPrototype) true zurückgibt;
        implicitPrototype = implicitPrototype.__proto__;
    }
    // Die Durchquerung ist beendet und noch nichts gefunden, returniere false
    gibt false zurück;
}

myInstanceof empfängt zwei Parameter: das Instanzobjekt obj und den constructor .

Holen Sie sich zuerst den impliziten Prototyp des Instanzobjekts: obj.__proto__ , das Prototypobjekt der Konstruktorfunktion constructor.prototype .

Anschließend können Sie fortfahren, den impliziten Prototyp der vorherigen Ebene abzurufen:

implicitPrototype = implicitPrototype.__proto__;

Um die Prototypenkette zu durchlaufen, müssen Sie herausfinden, ob sich displayPrototype in der Prototypenkette befindet, und wenn dies gefunden wird, geben Sie true zurück.

Wenn implicitPrototype null ist, wird die Suche beendet, und wenn es nicht gefunden wird, wird false zurückgegeben.

Die Prototypkette ist eigentlich eine Datenstruktur, die einer verknüpften Liste ähnelt.

Die Aufgabe instanceof besteht darin , herauszufinden, ob in der verknüpften Liste ein Zielknoten vorhanden ist . Beginnen Sie beim Kopfknoten und durchlaufen Sie ihn kontinuierlich rückwärts. Wenn der Zielknoten gefunden wurde, geben Sie true zurück. Wenn die Durchquerung endet und das Objekt nicht gefunden wird, wird false zurückgegeben.

3. Überprüfung

Schreiben Sie ein einfaches Beispiel, um Ihre Implementierung von instanceof zu überprüfen:

Funktion Person() {}
Funktion Person2() {}

const usr = neue Person();

Funktion myInstanceof(Objekt, Konstruktor) {
    let implicitPrototype = obj?.__proto__;
    const displayPrototype = Konstruktor.Prototype;
    während (impliziter Prototyp) {
        wenn (implicitPrototype === displayPrototype) true zurückgibt;
        implicitPrototype = implicitPrototype.__proto__;
    }
    gibt false zurück;
}

meineInstanceof(usr, Person); // wahr
meineInstanzvon(usr, Objekt); // wahr

meineInstanzvon(usr, Person2); // falsch
meineInstancevon(usr, Funktion); // falsch

myInstanceof(usr.__proto__, Person); // falsch
usr.__proto__instanceof Person; // falsch

Wie Sie sehen, erzeugt myInstanceof das richtige Ergebnis.

Interessanterweise gibt usr.__proto__ instanceof Person false zurück, was darauf hinweist, dass die vom obj instanceof constructor erkannte Prototypenkette obj Knoten selbst nicht enthält .

Häufige handgeschriebene JavaScript-Codes:

„GitHub – Code-js“

Dies ist das Ende dieses Artikels über die manuelle Implementierung von instanceof in JavaScript. Weitere relevante JavaScript-Instanceof-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!