instanceofКлючове слово в JavaScript може бути досить заплутаним , коли він вперше зустрічається, так як люди схильні думати , що JavaScript не є об'єктно-орієнтована мова програмування.

• Що це?
• Які проблеми вона вирішує?
• Коли це доречно і коли ні?

instanceof

Операнд з лівої сторони (LHS) - це фактичний об'єкт, що перевіряється на операнд правої сторони (RHS), який є фактичним конструктором класу. Основне визначення:

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

Ось кілька хороших прикладів, і ось приклад, взятий безпосередньо з сайту розробників Mozilla :

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)

Одне, що варто згадати, - це instanceofоцінка правдивою, якщо об'єкт успадковується від прототипу класу:

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

Це p instanceof Personправда, оскільки pуспадковує від Person.prototype.

За запитом ОП

Я додав невеликий приклад з деяким зразком коду та поясненням.

Коли ви оголошуєте змінну, ви надаєте їй певний тип.

Наприклад:

int i;
float f;
Customer c;

Вище показати вам деякі змінні, а саме i, fі c. Ці типи integer, floatі певний користувачем Customerтип даних. Такі типи можуть бути для будь-якої мови, а не лише для JavaScript. Однак при JavaScript, коли ви оголошуєте змінну, ви чітко не визначаєте тип var x,, x може бути числом / рядком / визначеним користувачем типом даних. Отже, що instanceofце перевіряє об'єкт, щоб побачити, чи є він зазначеного типу, так що зверху, беручи Customerоб'єкт, ми могли б зробити:

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!

Вище ми бачили, що cбуло оголошено типом Customer. Ми розібрали його і перевірили, чи він типу, Customerчи ні. Звичайно, це повертає істину. Потім, використовуючи Customerоб'єкт, ми перевіряємо, чи він є String. Ні, безумовно, Stringми не новим Customerоб'єктом, а не Stringоб'єктом. У цьому випадку він повертається помилковим.

Це дійсно так просто!

Існує важливий аспект для випадків, який, схоже, не висвітлюється в жодному з коментарів поки що: спадкування. Змінна, що оцінюється за допомогою instanceof, може повернути true для декількох "типів" через спадкування прототипів.

Наприклад, давайте визначимо тип і підтип:

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;

Тепер, коли у нас є кілька "класів", можна зробити кілька екземплярів і дізнатися, які вони екземпляри:

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

Бачите цей останній рядок? Усі "нові" виклики функції повертають об'єкт, який успадковується від Object. Це справедливо навіть при використанні скорочення об'єкта:

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

А як же самі визначення "класу"? Які вони екземпляри?

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

Я вважаю, що розуміння того, що будь-який об'єкт може бути екземпляром МНОГО типів, є важливим, оскільки ви мої (неправильно) припускаєте, що ви могли розмежувати, скажімо, об'єкт і функцію за допомогою instanceof. Як показує останній приклад, функція є об'єктом.

Це також важливо, якщо ви використовуєте будь-які шаблони успадкування і хочете підтвердити потомство об'єкта іншими методами, ніж типізація качок.

Сподіваюся, що це допомагає кожному, хто досліджує instanceof.

Інші відповіді тут правильні, але вони не вникають у те, як instanceofнасправді працює, що може зацікавити деяких мовних юристів там.

Кожен об’єкт у JavaScript має прототип, доступний через __proto__властивість. Функції також мають prototypeвластивість, яка є початковою __proto__для будь-яких створених ними об'єктів. Коли функція створена, їй надається унікальний об’єкт для prototype. instanceofОператор використовує цю унікальність , щоб дати вам відповідь. Ось як instanceofможе виглядати, якби ви написали це як функцію.

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

Це в основному перефразовуючи ECMA-262 видання 5.1 (також відоме як ES5), розділ 15.3.5.3.

Зауважте, що ви можете перепризначити будь-який об’єкт prototypeвластивості функції , а ви можете перепризначити __proto__властивість об'єкта після його побудови. Це дасть кілька цікавих результатів:

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

Я думаю, що варто зазначити, що instanceof визначається використанням ключового слова "new" при оголошенні об'єкта. У прикладі від 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)

Те, що він не згадував, це;

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

Вказавши "нове", фактично скопійовано кінцевий стан функції конструктора String у color1 var, а не просто встановивши його на повернене значення. Я думаю, що це краще показує, що робить нове ключове слово;

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'

Використання "new" призначає заявленому var значення "this" всередині функції, тоді як не використовуючи це, натомість призначає повернене значення.

І ви можете використовувати його для обробки помилок та налагодження, як це:

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

Що це?

Javascript - це прототипічна мова, що означає, що вона використовує прототипи для «успадкування». instanceofоператор перевіряє , якщо функція конструктора prototypepropertype присутній в __proto__ланцюзі об'єкта. Це означає, що він зробить наступне (якщо припустити, що testObj є об'єктом функції):

obj instanceof testObj;

1. Перевірте, чи прототип об'єкта дорівнює прототипу конструктора: obj.__proto__ === testObj.prototype >> якщо це true instanceofбуде поверненоtrue .
2. Піднімемось по ланцюжку прототипу. Наприклад: obj.__proto__.__proto__ === testObj.prototype >> якщо це є true instanceof, повернеться true.
3. Повторюватиметься крок 2, поки не буде перевірено повний прототип об'єкта. Якщо ніде в прототипі ланцюг об'єкта не збігається, testObj.prototypeтоді instanceofоператор повернеться false.

Приклад:

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

Які проблеми вона вирішує?

Це вирішило проблему зручної перевірки, чи об'єкт походить від певного прототипу. Наприклад, коли функція отримує об'єкт, який може мати різні прототипи. Потім, перш ніж використовувати методи з прототипу ланцюга, ми можемо за допомогою instanceofоператора перевірити, чи є ці методи на об’єкті.

Приклад:

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

Тут talk()функція спочатку перевіряється, чи прототип знаходиться на об'єкті. Після цього підбирається відповідний метод для виконання. Якщо не зробити цю перевірку, це може призвести до використання методу, який не існує, і, таким чином, помилка посилання.

Коли це доречно і коли ні?

Ми наче вже це перейшли. Використовуйте його, коли вам потрібно перевірити прототип об'єкта, перш ніж щось робити з ним.

На питання "Коли це доречно, а коли ні?", Мої 2 копійки:

instanceofрідко корисний у виробничому коді, але корисний у тестах, де ви хочете стверджувати, що ваш код повертає / створює об'єкти правильних типів. Чітко пояснюючи види об’єктів, які ваш код повертає / створює, ваші тести стають більш потужними як інструмент для розуміння та документування вашого коду.

instanceof- це просто синтаксичний цукор для 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 просто залежить від прототипу конструктора об'єкта.

Конструктор - це просто нормальна функція. Строго кажучи, це об'єкт функції, оскільки все є об’єктом у Javascript. І цей об’єкт функції має прототип, тому що кожна функція має прототип.

Прототип - це просто звичайний об'єкт, який знаходиться в ланцюзі прототипу іншого об'єкта. Це означає, що перебуваючи в ланцюзі прототипу іншого об'єкта, робить об’єкт прототипом:

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Оператора слід уникати , оскільки вона фальсифікує класів, які не існують в JavaScript. Незважаючи на classключове слово, не в ES2015, оскільки classце знову лише синтаксичний цукор для ... але це вже інша історія.

Щойно я знайшов додаток у реальному світі, і я використовуватиму його частіше зараз, я думаю.

Якщо ви використовуєте події jQuery, іноді потрібно написати більш загальну функцію, яку також можна викликати безпосередньо (без події). Ви можете instanceofперевірити, чи є перший параметр вашої функції примірником, jQuery.Eventі реагувати належним чином.

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

У моєму випадку функція, необхідна для обчислення чогось або для всіх (через подію натискання на кнопку), або лише одного конкретного елемента. Я використовував код:

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