Что такое метод instanceof?

Оператор instanceof в JavaScript

instanceof — это бинарный оператор в JavaScript, который проверяет, является ли объект экземпляром определенного конструктора (класса). Он возвращает true или false в зависимости от результата проверки.

Основной синтаксис

об"ект instanceof Конструктор

Оператор проверяет наличие Конструктор.prototype в цепочке прототипов объекта.

Примеры использования

Базовые проверки типов

class Animal {}
class Dog extends Animal {}

const dog = new Dog();

console.log(dog instanceof Dog);    // true
console.log(dog instanceof Animal);  // true (наследование)
console.log(dog instanceof Object);  // true (все объекты)
console.log(dog instanceof Array);   // false

Встроенные типы

const arr = [1, 2, 3];
const obj = { name: "Alice" };
const func = function() {};
const date = new Date();

console.log(arr instanceof Array);      // true
console.log(arr instanceof Object);     // true
console.log(obj instanceof Object);     // true
console.log(obj instanceof Array);      // false
console.log(func instanceof Function);  // true
console.log(date instanceof Date);      // true
console.log(date instanceof Object);    // true

Проверка в условиях

function processData(input) {
  if (input instanceof Array) {
    return input.map(item => item * 2);
  } else if (input instanceof Object) {
    return Object.values(input);
  } else {
    return [input];
  }
}

console.log(processData([1, 2, 3]));        // [2, 4, 6]
console.log(processData({ a: 1, b: 2 }));  // [1, 2]
console.log(processData(42));               // [42]

Как это работает: Цепочка прототипов

class Transport {}
class Vehicle extends Transport {}
class Car extends Vehicle {}

const car = new Car();

// instanceof проверяет наличие .prototype в цепочке:
// car.__proto__ === Car.prototype       -> true
// car.__proto__.__proto__ === Vehicle.prototype -> true
// car.__proto__.__proto__.__proto__ === Transport.prototype -> true

console.log(car instanceof Car);       // true
console.log(car instanceof Vehicle);   // true
console.log(car instanceof Transport); // true
console.log(car instanceof Object);    // true

Практические примеры

Обработка ошибок

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

function handleError(error) {
  if (error instanceof ValidationError) {
    console.error("Ошибка валидации:", error.message);
  } else if (error instanceof NetworkError) {
    console.error("Сетевая ошибка:", error.message);
  } else if (error instanceof Error) {
    console.error("Неизвестная ошибка:", error.message);
  } else {
    console.error("Неизвестный тип ошибки:", error);
  }
}

try {
  throw new ValidationError("Email некорректен");
} catch (e) {
  handleError(e);
}

Работа с DOM

function handleElement(el) {
  if (el instanceof HTMLButtonElement) {
    el.addEventListener("click", () => console.log("Клик!"));
  } else if (el instanceof HTMLInputElement) {
    el.addEventListener("change", (e) => console.log(e.target.value));
  } else if (el instanceof Element) {
    console.log("Это какой-то HTML элемент");
  }
}

const button = document.querySelector("button");
if (button) handleElement(button);

Проверка типов в React

function Component({ children }) {
  if (children instanceof Array) {
    return <div>{children.map((child, i) => <span key={i}>{child}</span>)}</div>;
  } else if (typeof children === "string") {
    return <p>{children}</p>;
  } else {
    return <>{children}</>;
  }
}

Важные особенности

1. Работает с наследованием

class Parent {}
class Child extends Parent {}

const obj = new Child();
console.log(obj instanceof Child);  // true
console.log(obj instanceof Parent); // true !

2. Примитивные типы — false

console.log(42 instanceof Number);        // false
console.log("string" instanceof String);  // false
console.log(true instanceof Boolean);     // false
console.log(undefined instanceof Object); // false
console.log(null instanceof Object);      // false

// Но объекты-обертки работают:
const num = new Number(42);
console.log(num instanceof Number); // true

3. Проблема с iframe и cross-context

// В разных контекстах (iframe) instanceof может не работать
const frameArray = frames[0].document.createElement("div");
console.log(frameArray instanceof Array); // false в некоторых случаях

// Решение — использовать Object.prototype.toString
console.log(Object.prototype.toString.call(frameArray)); // "[object HTMLDivElement]"

Альтернативы instanceof

typeof — для примитивов

console.log(typeof 42);        // "number"
console.log(typeof "str");     // "string"
console.log(typeof {});        // "object"
console.log(typeof []);        // "object" <- не различает!

Array.isArray() — для массивов

console.log(Array.isArray([1, 2, 3]));        // true
console.log(Array.isArray("not array"));      // false
console.log(Array.isArray({ length: 3 }));   // false

Object.prototype.toString — универсально

function getType(value) {
  return Object.prototype.toString.call(value).slice(8, -1);
}

console.log(getType([]));        // "Array"
console.log(getType({}));        // "Object"
console.log(getType(new Date())); // "Date"
console.log(getType(null));       // "Null"

Таблица сравнения методов проверки типов

Оператор instanceof — один из основных способов проверки типов в JavaScript при работе с объектами и классами. Это важный инструмент для типизации и обработки различных типов данных в приложениях.