Was ist der instanceof-Operator in JavaScript?

Question

のことです。 instanceof Schlüsselwort in JavaScript kann beim ersten Mal ziemlich verwirrend sein, da die meisten Leute denken, dass JavaScript keine objektorientierte Programmiersprache ist.

• Was ist das?
• Welche Probleme werden damit gelöst?
• Wann ist es angebracht und wann nicht?

Answer 1

Was ist das?

Javascript ist eine prototypische Sprache, was bedeutet, dass sie Prototypen für die "Vererbung" verwendet. die instanceof Operator prüft, ob eine Konstruktorfunktion die prototype propertype ist in der __proto__ Kette eines Objekts. Das bedeutet, dass es Folgendes tut (unter der Annahme, dass testObj ein Funktionsobjekt ist):

obj instanceof testObj;

1. Prüfen, ob der Prototyp des Objekts mit dem Prototyp des Konstruktors übereinstimmt: obj.__proto__ === testObj.prototype >> wenn dies ein true instanceof wird zurückgegeben true .
2. Wird in der Prototypenkette aufsteigen. Zum Beispiel: obj.__proto__.__proto__ === testObj.prototype >> wenn dies ein true instanceof wird zurückgegeben true .
3. Schritt 2 wird so lange wiederholt, bis der gesamte Prototyp des Objekts inspiziert ist. Wenn nirgendwo in der Prototypenkette des Objekts eine Übereinstimmung mit testObj.prototype dann instanceof Operator wird zurückgeben false .

Exemple :

function Person(name) {
  this.name = name;
}
var me = new Person('Willem');

console.log(me instanceof Person); // true
// because:  me.__proto__ === Person.prototype  // evaluates true

console.log(me instanceof Object); // true
// because:  me.__proto__.__proto__ === Object.prototype  // evaluates true

console.log(me instanceof Array);  // false
// because: Array is nowhere on the prototype chain

Welche Probleme werden damit gelöst?

Es löste das Problem der bequemen Überprüfung, ob ein Objekt von einem bestimmten Prototyp abgeleitet ist. Zum Beispiel, wenn eine Funktion ein Objekt empfängt, das verschiedene Prototypen haben kann. Dann können wir, bevor wir Methoden aus der Prototypenkette verwenden, die instanceof Operator, um zu prüfen, ob diese Methoden auf dem Objekt vorhanden sind.

Exemple :

function Person1 (name) {
  this.name = name;
}

function Person2 (name) {
  this.name = name;
}

Person1.prototype.talkP1 = function () {
  console.log('Person 1 talking');
}

Person2.prototype.talkP2 = function () {
  console.log('Person 2 talking');
}

function talk (person) {
  if (person instanceof Person1) {
    person.talkP1();
  }

  if (person instanceof Person2) {
    person.talkP2();
  }

}

const pers1 = new Person1 ('p1');
const pers2 = new Person2 ('p2');

talk(pers1);
talk(pers2);

Hier im talk() Funktion wird zunächst geprüft, ob sich der Prototyp auf dem Objekt befindet. Danach wird die entsprechende Methode zur Ausführung ausgewählt. Wird diese Prüfung nicht durchgeführt, könnte eine Methode ausgeführt werden, die nicht existiert, was zu einem Referenzfehler führt.

Wann ist es angebracht und wann nicht?

Wir haben das bereits besprochen. Verwenden Sie es, wenn Sie den Prototyp eines Objekts überprüfen müssen, bevor Sie etwas mit ihm tun.

Answer 2

//Vehicle is a function. But by naming conventions
//(first letter is uppercase), it is also an object
//constructor function ("class").
function Vehicle(numWheels) {
    this.numWheels = numWheels;
}

//We can create new instances and check their types.
myRoadster = new Vehicle(4);
alert(myRoadster instanceof Vehicle);

Answer 3

Zur Frage "Wann ist es angebracht und wann nicht?", meine 2 Cents:

instanceof ist im Produktionscode selten nützlich, aber in Tests, in denen Sie sicherstellen wollen, dass Ihr Code Objekte des richtigen Typs zurückgibt/erzeugt. Indem Sie explizit angeben, welche Arten von Objekten Ihr Code zurückgibt/erzeugt, werden Ihre Tests als Werkzeug zum Verstehen und Dokumentieren Ihres Codes leistungsfähiger.

Answer 4

Ich habe gerade eine praktische Anwendung gefunden und werde sie jetzt wohl öfter verwenden.

Wenn Sie jQuery-Ereignisse verwenden, möchten Sie manchmal eine allgemeinere Funktion schreiben, die auch direkt (ohne Ereignis) aufgerufen werden kann. Sie können verwenden instanceof um zu prüfen, ob der erste Parameter Ihrer Funktion eine Instanz von jQuery.Event und angemessen zu reagieren.

var myFunction = function (el) {                
    if (el instanceof $.Event) 
        // event specific code
    else
        // generic code
};

$('button').click(recalc);    // Will execute event specific code
recalc('myParameter');  // Will execute generic code

In meinem Fall musste die Funktion etwas entweder für alle (per Klick-Ereignis auf eine Schaltfläche) oder nur für ein bestimmtes Element berechnen. Der Code, den ich verwendet habe:

var recalc = function (el) { 
    el = (el == undefined || el instanceof $.Event) ? $('span.allItems') : $(el);
    // calculate...
};

Answer 5

instanceof ist nur syntaktischer Zucker für isPrototypeOf :

function Ctor() {}
var o = new Ctor();

o instanceof Ctor; // true
Ctor.prototype.isPrototypeOf(o); // true

o instanceof Ctor === Ctor.prototype.isPrototypeOf(o); // equivalent

instanceof hängt nur vom Prototyp eines Konstruktors eines Objekts ab.

Ein Konstruktor ist einfach eine normale Funktion. Streng genommen ist er ein Funktionsobjekt, denn in Javascript ist alles ein Objekt. Und dieses Funktionsobjekt hat einen Prototyp, denn jede Funktion hat einen Prototyp.

Ein Prototyp ist ein ganz normales Objekt, das sich innerhalb der Prototypenkette eines anderen Objekts befindet. Das bedeutet, dass ein Objekt zu einem Prototyp wird, wenn es sich in der Prototypenkette eines anderen Objekts befindet:

function f() {} //  ordinary function
var o = {}, // ordinary object
 p;

f.prototype = o; // oops, o is a prototype now
p = new f(); // oops, f is a constructor now

o.isPrototypeOf(p); // true
p instanceof f; // true

のことです。 instanceof Operator sollte vermieden werden, weil er Klassen vortäuscht, die in Javascript nicht existieren. Trotz der class Schlüsselwort auch in ES2015 nicht, da class ist wiederum nur syntaktischer Zucker für ... aber das ist eine andere Geschichte.