Интервьюер: Почему '[] 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 на IIS без использования программы установки веб-платформы
Запуск PHP на IIS без использования программы установки веб-платформы

19.03.2023 13:43

Установщик веб-платформы, предлагаемый компанией Microsoft, перестанет работать 31 декабря 2022 года. Его закрытие привело к тому, что мы не можем запускать наши php-файлы через localhost на наших компьютерах. Мне с трудом удалось установить его и я решил поделиться этой статьей, чтобы помочь тем,...

Оптимизация React Context шаг за шагом в 4 примерах
Оптимизация React Context шаг за шагом в 4 примерах

19.03.2023 13:03

При использовании компонентов React в сочетании с Context вы можете оптимизировать рендеринг, обернув ваш компонент React в React.memo сразу после поставщика контекста. Это позволит избежать ненужных повторных рендеров.

Библиотека для работы с мороженым
Библиотека для работы с мороженым

19.03.2023 11:50

Лично я попрощался с операторами print() в python. Без шуток.

Настройка шаблона Metronic с помощью Webpack и Gulp
Настройка шаблона Metronic с помощью Webpack и Gulp

19.03.2023 06:15

Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они постоянно обновляют версию (а нам нужно быстро наверстать упущенное!).

Уроки CSS 6
Уроки CSS 6

18.03.2023 11:32

Здравствуйте дорогие читатели, я Ферди Сефа Дюзгюн, сегодня мы продолжим с вами уроки css. Сегодня мы снова продолжим с так называемых классов.

Что такое Css? Для чего он используется?
Что такое Css? Для чего он используется?

18.03.2023 11:16

CSS, или "Каскадные таблицы стилей", - это язык стилей, используемый в веб-страницах. CSS является одним из основных инструментов веб-разработки наряду с HTML и JavaScript.