Das instanceofSchlüsselwort in JavaScript kann beim ersten Auftreten ziemlich verwirrend sein, da die Leute glauben, dass JavaScript keine objektorientierte Programmiersprache ist.

• Was ist es?
• Welche Probleme löst es?
• Wann ist es angebracht und wann nicht?

Instanz von

Der LHS-Operand (Left Hand Side) ist das tatsächliche Objekt, das mit dem RHS-Operanden (Right Hand Side) getestet wird, der der eigentliche Konstruktor einer Klasse ist. Die grundlegende Definition lautet:

Checks the current object and returns true if the object
is of the specified object type.

Hier sind einige gute Beispiele und hier ein Beispiel, das direkt von Mozillas Entwicklerseite stammt :

var color1 = new String("green");
color1 instanceof String; // returns true
var color2 = "coral"; //no type specified
color2 instanceof String; // returns false (color2 is not a String object)

Eine erwähnenswerte Sache ist die instanceofBewertung als wahr, wenn das Objekt vom Prototyp der Klasse erbt:

var p = new Person("Jon");
p instanceof Person

Das ist p instanceof Personwahr, da perbt von Person.prototype.

Auf Anfrage des OP

Ich habe ein kleines Beispiel mit Beispielcode und einer Erklärung hinzugefügt.

Wenn Sie eine Variable deklarieren, geben Sie ihr einen bestimmten Typ.

Zum Beispiel:

int i;
float f;
Customer c;

Die oben zeigen Ihnen einige Variablen, nämlich i, fund c. Die Typen sind integer, floatund eine Benutzer - definierte CustomerDatentypen. Typen wie die oben genannten können für jede Sprache verwendet werden, nicht nur für JavaScript. Wenn Sie jedoch mit JavaScript eine Variable deklarieren, definieren Sie keinen Typ explizit. var xX kann eine Zahl / Zeichenfolge / ein benutzerdefinierter Datentyp sein. Also , was instanceoftut , ist es das Objekt überprüft, ob es von der Art ist , angegeben , so von oben die Einnahme CustomerObjekt , das wir tun könnten:

var c = new Customer();
c instanceof Customer; //Returns true as c is just a customer
c instanceof String; //Returns false as c is not a string, it's a customer silly!

Oben haben wir gesehen, dass dies cmit dem Typ deklariert wurde Customer. Wir haben es neu gemacht und geprüft, ob es vom Typ ist Customeroder nicht. Sicher ist, es gibt wahr zurück. Dann Customerprüfen wir immer noch mit dem Objekt, ob es ein ist String. Nein, definitiv nicht Stringwir haben ein CustomerObjekt neu gemacht, kein StringObjekt. In diesem Fall wird false zurückgegeben.

So einfach ist das wirklich!

Es gibt eine wichtige Facette, die in keinem der bisherigen Kommentare behandelt zu werden scheint: Vererbung. Eine Variable, die mithilfe von instanceof ausgewertet wird, kann aufgrund der prototypischen Vererbung für mehrere "Typen" true zurückgeben.

Definieren wir zum Beispiel einen Typ und einen Subtyp:

function Foo(){ //a Foo constructor
    //assign some props
    return this;
}

function SubFoo(){ //a SubFoo constructor
    Foo.call( this ); //inherit static props
    //assign some new props
    return this;
}

SubFoo.prototype = Object.create(Foo.prototype); // Inherit prototype
SubFoo.prototype.constructor = SubFoo;

Nachdem wir nun ein paar "Klassen" haben, können wir einige Instanzen erstellen und herausfinden, wofür sie Instanzen sind:

var 
    foo = new Foo()
,   subfoo = new SubFoo()
;

alert( 
    "Q: Is foo an instance of Foo? "
+   "A: " + ( foo instanceof Foo ) 
); // -> true

alert( 
    "Q: Is foo an instance of SubFoo? " 
+   "A: " + ( foo instanceof SubFoo ) 
); // -> false

alert( 
    "Q: Is subfoo an instance of Foo? "
+   "A: " + ( subfoo instanceof Foo ) 
); // -> true

alert( 
    "Q: Is subfoo an instance of SubFoo? "
+   "A: " + ( subfoo instanceof SubFoo ) 
); // -> true

alert( 
    "Q: Is subfoo an instance of Object? "
+   "A: " + ( subfoo instanceof Object ) 
); // -> true

Sehen Sie diese letzte Zeile? Alle "neuen" Aufrufe einer Funktion geben ein Objekt zurück, das von Object erbt. Dies gilt auch bei Verwendung der Kurzform zur Objekterstellung:

alert( 
    "Q: Is {} an instance of Object? "
+   "A: " + ( {} instanceof Object ) 
); // -> true

Und was ist mit den "Klassen" -Definitionen selbst? Wovon sind sie Beispiele?

alert( 
    "Q: Is Foo an instance of Object? "
+   "A:" + ( Foo instanceof Object) 
); // -> true

alert( 
    "Q: Is Foo an instance of Function? "
+   "A:" + ( Foo instanceof Function) 
); // -> true

Ich bin der Meinung, dass es wichtig ist zu verstehen, dass jedes Objekt eine Instanz von MEHRFACHEN Typen sein kann, da Sie (fälschlicherweise) davon ausgehen, dass Sie zwischen, sagen wir und Objekt und einer Funktion durch Verwendung von unterscheiden können instanceof. Da dieses letzte Beispiel zeigt eindeutig eine Funktion ist ein Objekt.

Dies ist auch wichtig, wenn Sie Vererbungsmuster verwenden und die Nachkommen eines Objekts mit anderen Methoden als der Ententypisierung bestätigen möchten.

Hoffe, das hilft jedem beim Erkunden instanceof.

Die anderen Antworten hier sind richtig, aber sie befassen sich nicht mit der instanceoftatsächlichen Funktionsweise, was für einige Sprachanwälte da draußen von Interesse sein kann.

Jedes Objekt in JavaScript verfügt über einen Prototyp, auf den über die __proto__Eigenschaft zugegriffen werden kann. Funktionen haben auch eine prototypeEigenschaft, die die Initiale __proto__für alle von ihnen erstellten Objekte ist. Wenn eine Funktion erstellt wird, erhält sie ein eindeutiges Objekt für prototype. Der instanceofBediener verwendet diese Eindeutigkeit, um Ihnen eine Antwort zu geben. So instanceofkönnte es aussehen, wenn Sie es als Funktion geschrieben haben.

function instance_of(V, F) {
  var O = F.prototype;
  V = V.__proto__;
  while (true) {
    if (V === null)
      return false;
    if (O === V)
      return true;
    V = V.__proto__;
  }
}

Dies ist im Wesentlichen eine Umschreibung von ECMA-262 Edition 5.1 (auch als ES5 bekannt), Abschnitt 15.3.5.3.

Beachten Sie, dass Sie jedes Objekt der prototypeEigenschaft einer Funktion neu zuweisen und die __proto__Eigenschaft eines Objekts nach der Erstellung neu zuweisen können . Dies gibt Ihnen einige interessante Ergebnisse:

function F() { }
function G() { }
var p = {};
F.prototype = p;
G.prototype = p;
var f = new F();
var g = new G();

f instanceof F;   // returns true
f instanceof G;   // returns true
g instanceof F;   // returns true
g instanceof G;   // returns true

F.prototype = {};
f instanceof F;   // returns false
g.__proto__ = {};
g instanceof G;   // returns false

Ich denke, es ist erwähnenswert, dass instanceof durch die Verwendung des Schlüsselworts "new" beim Deklarieren des Objekts definiert wird. Im Beispiel von JonH;

var color1 = new String("green");
color1 instanceof String; // returns true
var color2 = "coral";
color2 instanceof String; // returns false (color2 is not a String object)

Was er nicht erwähnte, ist dies;

var color1 = String("green");
color1 instanceof String; // returns false

Wenn Sie "new" angeben, wird der Endstatus der String-Konstruktorfunktion tatsächlich in die Variable color1 kopiert, anstatt nur den Rückgabewert festzulegen. Ich denke, dies zeigt besser, was das neue Schlüsselwort bewirkt.

function Test(name){
    this.test = function(){
        return 'This will only work through the "new" keyword.';
    }
    return name;
}

var test = new Test('test');
test.test(); // returns 'This will only work through the "new" keyword.'
test // returns the instance object of the Test() function.

var test = Test('test');
test.test(); // throws TypeError: Object #<Test> has no method 'test'
test // returns 'test'

Wenn Sie "new" verwenden, wird der deklarierten Variable der Wert "this" innerhalb der Funktion zugewiesen, während bei Nichtverwendung stattdessen der Rückgabewert zugewiesen wird.

Und Sie können es wie folgt zur Fehlerbehandlung und zum Debuggen verwenden:

try{
    somefunction();
} 
catch(error){
    if (error instanceof TypeError) {
        // Handle type Error
    } else if (error instanceof ReferenceError) {
        // Handle ReferenceError
    } else {
        // Handle all other error types
    }
}

//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);

Was ist es?

Javascript ist eine prototypische Sprache, dh es werden Prototypen für die Vererbung verwendet. Der instanceofOperator testet, ob der prototypeEigenschaftstyp einer Konstruktorfunktion in der __proto__Kette eines Objekts vorhanden ist. Dies bedeutet, dass Folgendes ausgeführt wird (vorausgesetzt, testObj ist ein Funktionsobjekt):

obj instanceof testObj;

1. Überprüfen Sie, ob der Prototyp des Objekts dem Prototyp des Konstruktors entspricht: obj.__proto__ === testObj.prototype >> Wenn dies der Fall ist, true instanceofwird zurückgegeben true.
2. Klettert die Prototypenkette hinauf. Zum Beispiel: obj.__proto__.__proto__ === testObj.prototype >> Wenn dies der Fall ist, true instanceofwird zurückgegeben true.
3. Wiederholt Schritt 2, bis der vollständige Prototyp des Objekts überprüft wurde. Wenn nirgendwo auf der Prototypkette des Objekts angepasst ist mit testObj.prototypedann instanceofwird Operator zurückkehren false.

Beispiel:

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 löst es?

Es löste das Problem der bequemen Überprüfung, ob ein Objekt von einem bestimmten Prototyp stammt. Zum Beispiel, wenn eine Funktion ein Objekt empfängt, das verschiedene Prototypen haben kann. Bevor wir Methoden aus der Prototypenkette verwenden, können wir mit dem instanceofOperator überprüfen, ob sich diese Methoden auf dem Objekt befinden.

Beispiel:

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 wird in der talk()Funktion zunächst geprüft, ob sich der Prototyp auf dem Objekt befindet. Danach wird die entsprechende Methode zur Ausführung ausgewählt. Wenn Sie diese Prüfung nicht durchführen, kann dies dazu führen, dass eine nicht vorhandene Methode ausgeführt wird und somit ein Referenzfehler auftritt.

Wann ist es angebracht und wann nicht?

Wir haben das schon durchgesehen. Verwenden Sie es, wenn Sie den Prototyp eines Objekts überprüfen müssen, bevor Sie etwas damit tun.

Auf die Frage "Wann ist es angebracht und wann nicht?", Meine 2 Cent:

instanceofist im Produktionscode selten nützlich, aber in Tests, in denen Sie behaupten möchten, dass Ihr Code Objekte des richtigen Typs zurückgibt / erstellt. Indem Sie explizit angeben, welche Arten von Objekten Ihr Code zurückgibt / erstellt, werden Ihre Tests leistungsfähiger als Werkzeug zum Verstehen und Dokumentieren Ihres Codes.

instanceofist 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 nur eine normale Funktion. Genau genommen ist es ein Funktionsobjekt, da alles ein Objekt in Javascript ist. Und dieses Funktionsobjekt hat einen Prototyp, weil jede Funktion einen Prototyp hat.

Ein Prototyp ist nur ein normales Objekt, das sich innerhalb der Prototypenkette eines anderen Objekts befindet. Das bedeutet, in der Prototypenkette eines anderen Objekts zu sein, macht ein Objekt zu einem Prototyp:

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

Der instanceofOperator sollte vermieden werden, da er Klassen fälscht, die in Javascript nicht vorhanden sind. Trotz des classSchlüsselworts auch nicht in ES2015, da classes wieder nur syntaktischer Zucker für ... ist, aber das ist eine andere Geschichte.

Ich habe gerade eine reale Anwendung gefunden und werde sie jetzt öfter verwenden, denke ich.

Wenn Sie jQuery-Ereignisse verwenden, möchten Sie manchmal eine allgemeinere Funktion schreiben, die auch direkt (ohne Ereignis) aufgerufen werden kann. Mit können Sie instanceofüberprüfen, ob der erste Parameter Ihrer Funktion eine Instanz von ist, jQuery.Eventund entsprechend 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 entweder für alle (über ein Klickereignis auf einer Schaltfläche) oder nur für ein bestimmtes Element etwas berechnen. Der Code, den ich verwendet habe:

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