Słowo instanceofkluczowe w JavaScript może być dość mylące, gdy pojawia się po raz pierwszy, ponieważ ludzie myślą, że JavaScript nie jest obiektowym językiem programowania.

• Co to jest?
• Jakie problemy rozwiązuje?
• Kiedy jest to właściwe, a kiedy nie?

wystąpienie

Operand po lewej stronie (LHS) to rzeczywisty testowany obiekt na operand po prawej stronie (RHS), który jest rzeczywistym konstruktorem klasy. Podstawowa definicja to:

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

Oto kilka dobrych przykładów i oto przykład zaczerpnięty bezpośrednio ze strony dewelopera Mozilli :

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)

Jedną rzeczą, o której warto wspomnieć, jest instanceofprawda, jeśli obiekt dziedziczy po prototypie klasy:

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

Jest to p instanceof Personprawdą, ponieważ pdziedziczy po Person.prototype.

Na prośbę PO

Dodałem mały przykład z jakimś przykładem kodu i wyjaśnieniem.

Kiedy deklarujesz zmienną, nadajesz jej określony typ.

Na przykład:

int i;
float f;
Customer c;

Powyższy pokazać kilka zmiennych, a mianowicie i, foraz c. Typy są integer, floati zdefiniowane przez użytkownika Customertyp danych. Typy takie jak powyższe mogą być dla dowolnego języka, nie tylko JavaScript. Jednak w JavaScript, kiedy deklarujesz zmienną, nie definiujesz jawnie typu var x, x może być liczbą / ciągiem / typem danych zdefiniowanym przez użytkownika. Więc co instanceofto jest sprawdzanie obiektu, aby zobaczyć, czy jest on określonego typu, więc z góry biorącCustomer obiekt, który możemy zrobić:

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!

Powyżej widzieliśmy, że czostał zadeklarowany z typem Customer. Zmieniliśmy go i sprawdziliśmy, czy jest typu, Customerczy nie. Pewnie, że zwraca wartość true. Następnie nadal za pomocą Customerobiektu sprawdzamy, czy jest to String. Nie, zdecydowanie nie Stringnowy Customerobiekt nie Stringprzedmiot. W takim przypadku zwraca wartość false.

To naprawdę jest takie proste!

Jest instancja ważna, która nie wydaje się być uwzględniona w żadnym z dotychczasowych komentarzy: dziedziczenie. Zmienna oceniana za pomocą instanceof może zwrócić wartość true dla wielu „typów” z powodu dziedziczenia prototypowego.

Na przykład zdefiniujmy typ i podtyp:

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;

Teraz, gdy mamy już kilka „klas”, wykonajmy kilka instancji i dowiedzmy się, co to są:

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

Widzisz tę ostatnią linię? Wszystkie „nowe” wywołania funkcji zwracają obiekt, który dziedziczy po Object. Dzieje się tak nawet w przypadku skróconego tworzenia obiektów:

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

A co z samymi definicjami „klasowymi”? Jakie są ich wystąpienia?

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

Wydaje mi się, że zrozumienie, że każdy obiekt może być instancją typu WIELOKROTNEGO, jest ważne, ponieważ ty (niepoprawnie) zakładasz, że możesz rozróżnić, powiedzieć i obiekt od funkcji za pomocą instanceof. Jak pokazuje ten ostatni przykład, funkcja jest obiektem.

Jest to również ważne, jeśli używasz wzorców dziedziczenia i chcesz potwierdzić potomstwo obiektu metodami innymi niż pisanie kaczką.

Mam nadzieję, że pomoże każdemu odkrywać instanceof.

Pozostałe odpowiedzi tutaj są poprawne, ale nie zajmują się tym, jak instanceoffaktycznie działa, co może zainteresować niektórych prawników zajmujących się językiem.

Każdy obiekt w JavaScript ma prototyp, dostępny poprzez __proto__właściwość. Funkcje mają także prototypewłaściwość, która jest inicjałem __proto__dla wszystkich tworzonych przez nich obiektów. Gdy funkcja jest tworzona, otrzymuje unikalny obiekt prototype. instanceofOperator wykorzystuje tę niepowtarzalność dać odpowiedź. Oto, co instanceofmoże wyglądać, jeśli napisałeś to jako funkcję.

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__;
  }
}

Jest to w zasadzie parafrazowanie ECMA-262 wydanie 5.1 (znane również jako ES5), sekcja 15.3.5.3.

Zauważ, że możesz ponownie przypisać dowolny obiekt do prototypewłaściwości funkcji i możesz ponownie przypisać __proto__właściwość obiektu po jego zbudowaniu. To da ci kilka interesujących wyników:

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

Myślę, że warto zauważyć, że instanceof jest definiowany przez użycie słowa kluczowego „new” podczas deklarowania obiektu. W przykładzie z 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)

Nie wspomniał o tym;

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

Określenie „new” faktycznie skopiowało stan końcowy funkcji konstruktora String do zmiennej color1 var, zamiast po prostu ustawić wartość zwracaną. Myślę, że to lepiej pokazuje, co robi nowe słowo kluczowe;

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'

Użycie „nowego” przypisuje wartość „this” wewnątrz funkcji do zadeklarowanego var, natomiast nieużywanie go przypisuje wartość zwracaną.

Możesz go użyć do obsługi błędów i debugowania:

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

Co to jest?

JavaScript jest językiem prototypowym, co oznacza, że ​​używa prototypów do „dziedziczenia”. instanceofoperatora sprawdza, czy funkcją konstruktora prototypepropertype obecny jest w __proto__łańcuchu obiektu. Oznacza to, że wykona następujące czynności (zakładając, że testObj jest obiektem funkcji):

obj instanceof testObj;

1. Sprawdź, czy prototyp obiektu jest równy prototypowi konstruktora: obj.__proto__ === testObj.prototype >> czy to true instanceofzwróci true.
2. Wspina się po łańcuchu prototypów. Na przykład: obj.__proto__.__proto__ === testObj.prototype >> jeśli to true instanceofwrócitrue .
3. Powtórzy krok 2 do momentu sprawdzenia pełnego prototypu obiektu. Jeśli nigdzie na łańcuchu prototypów obiektu jest dopasowane testObj.prototypenastępnie instanceofoperator powróci false.

Przykład:

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

Jakie problemy rozwiązuje?

Rozwiązano problem wygodnego sprawdzania, czy obiekt pochodzi z określonego prototypu. Na przykład, gdy funkcja odbiera obiekt, który może mieć różne prototypy. Następnie, przed użyciem metod z łańcucha prototypów, możemy użyć instanceofoperatora, aby sprawdzić, czy te metody znajdują się na obiekcie.

Przykład:

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

Tutaj w talk()funkcji najpierw sprawdza się, czy prototyp znajduje się na obiekcie. Następnie wybiera się odpowiednią metodę do wykonania. Nie wykonanie tej kontroli może spowodować wykonanie metody, która nie istnieje, a tym samym błąd odniesienia.

Kiedy jest to właściwe, a kiedy nie?

W pewnym sensie już to omówiliśmy. Użyj go, gdy chcesz sprawdzić prototyp obiektu przed zrobieniem z nim czegoś.

Na pytanie „Kiedy jest to właściwe, a kiedy nie?”, Moje 2 centy:

instanceofjest rzadko przydatny w kodzie produkcyjnym, ale przydatny w testach, w których chcesz stwierdzić, że Twój kod zwraca / tworzy obiekty poprawnych typów. Wyrażając się jasno o rodzajach obiektów, które kod zwraca / tworzy, twoje testy stają się potężniejsze jako narzędzie do zrozumienia i dokumentowania kodu.

instanceofjest tylko cukrem syntaktycznym dla 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 zależy tylko od prototypu konstruktora obiektu.

Konstruktor jest po prostu normalną funkcją. Ściśle mówiąc, jest to obiekt funkcji, ponieważ wszystko jest obiektem w JavaScript. I ten obiekt funkcji ma prototyp, ponieważ każda funkcja ma prototyp.

Prototyp to po prostu normalny obiekt, który znajduje się w łańcuchu prototypów innego obiektu. Oznacza to, że będąc w łańcuchu prototypów innego obiektu tworzy obiekt do prototypu:

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

instanceofOperator należy unikać, ponieważ podróbki klas, które nie istnieją w JavaScript. Pomimo tego classsłowa kluczowego nie w ES2015, ponieważ classjest to po prostu cukier składniowy dla ... ale to inna historia.

Właśnie znalazłem aplikację z prawdziwego świata i myślę, że teraz będzie z niej częściej korzystać.

Jeśli używasz zdarzeń jQuery, czasami chcesz napisać bardziej ogólną funkcję, która może być również wywoływana bezpośrednio (bez zdarzenia). Możesz użyć, instanceofaby sprawdzić, czy pierwszy parametr funkcji jest instancją jQuery.Eventi odpowiednio zareagować.

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

W moim przypadku funkcja potrzebowała obliczyć coś dla wszystkich (poprzez zdarzenie kliknięcia na przycisku) lub tylko dla jednego określonego elementu. Kod, którego użyłem:

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