Интервьюер: Почему '[] instanceof Object' возвращает "true"?

RedDeveloper
17.03.2023 14:16
Интервьюер: Почему '[] instanceof Object' возвращает "true"?

Это то, что должны знать все разработчики.

Все мы знаем, что [] instanceof Array возвращает true, но почему [] instanceof Object тоже возвращает true?

Друзья, если бы вам задали этот вопрос на собеседовании, как бы вы на него ответили?

Что такое instanceof?

Давайте посмотрим на объяснение на MDN :

"Оператор instanceof проверяет, появляется ли свойство prototype конструктора где-либо в цепочке прототипов объекта. Возвращаемое значение - булево значение. Его поведение может быть настроено с помощью Symbol.hasInstance".

// from mdn
const Cat = function (name) {
  this.name = name
}
Cat.prototype.showName = function () {
  console.info(this.name)
}
const cat = new Cat('miao')

console.info(cat instanceof Cat) // true

Итак, почему cat instanceof Cat возвращает true? Все очень просто, и будет легче понять, если мы нарисуем картинку.

Итак почему cat instanceof Cat возвращает true? Все очень просто и будет легче понять

Поскольку Cat.prototype появляется в цепочке прототипов кошки, правильно будет вернуть true.

Давайте рассмотрим более сложный пример:

const Animal = function (name) {
  this.name = name
}

Animal.prototype.showName = function () {
  console.info(this.name)
}

const Cat = function (name) {
  Animal.call(this, name)
}

Cat.prototype = new Animal()
Cat.prototype.constructor = Cat

const cat = new Cat('miao')

console.info(cat instanceof Cat) // true
console.info(cat instanceof Animal) // true
console.info(cat instanceof Object) // true
Давайте рассмотрим более сложный пример

Из этого рисунка мы можем четко объяснить, почему все три выражения возвращают true, потому что Cat.prototype, Animal.prototype, Object.prototype все появляются в прототипе кошки, поэтому результат будет true.

  1. cat instanceof Cat
  2. cat instanceof Animal
  3. at instanceof Object

Почему "[] instanceof Object" возвращает true

Давайте вернемся к самому вопросу и вместе нарисуем простую картинку, чтобы увидеть ответ.

Давайте вернемся к самому вопросу и вместе нарисуем простую картинку чтобы увидеть ответ
const arr = []

console.info(arr instanceof Array) // true
console.info(arr instanceof Object) // true

Как реализовать оператор instanceof?

После вышеприведенного объяснения, когда интервьюер спросит нас, как реализовать оператор instanceof, достаточно освоить эти пункты знаний.

  1. Прототип функции-конструктора
  2. Цепочка прототипов объекта

Решение 1

Решение 2

Решение 3

Наконец,

Спасибо за чтение. Я с нетерпением жду, что вы будете следить за мной и читать больше качественных статей.

  • Интервьюер: Что случилось с "npm run xxx"?
  • 20 методов массивов JavaScript, которые должен знать каждый разработчик
  • 8 крутых трюков GitHub, которые заставят вас выглядеть как старший разработчик
  • Интервьюер: Может ли "x !== x" возвращать True в JavaScript?
  • Что выводит (123['toString'].length + 123) в JavaScript?

Подпишитесь на нашу бесплатную еженедельную рассылку . Следите за нами в Twitter , LinkedIn , YouTube , и Discord .

Заинтересованы в масштабировании своего программного стартапа? Посмотрите Circuit.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.