В JavaScript есть операторы typeof и instanceof, на первый взгляд они похоже, но они выполняют разные функции.

В этой статье будет рассмотрена разница между ними и показаны примеры использования.

Typeof оператор

Оператор typeof используется, в основном, для того, чтобы узнать тип примитивного значения.

Если у нас есть числа, больше числа, строки, символы, логические или неопределенные значения мы можем узнать их с помощью оператора.

К примеру, у нас есть :

console.log(typeof 1);  

В терминале отобразится 'number'.

Более полезно, когда у нас есть переменные:

 let foo = 1;
 console.log(typeof foo);  

В таком случае мы можем использовать typeof, чтобы узнать тип переменной foo.

Важно запомнить, что typeof не следует использовать для null, если мы напишем:

 console.log(typeof null);

В терминале отобразится 'object'. Вместо этого следует использовать оператор === ://

 foo === null

Другой пример содержит boolean значения.

typeof false === 'boolean';
typeof Boolean(0) === 'boolean';

Мы также можем проверить числа следующим образом:

typeof Number('1') === 'number';
typeof Number('foo') === 'number';
typeof NaN === 'number';

Обратите внимание, что NaN и вычисления, которые возвращают NaN, такие как Number(‘foo’ ), также относятся к типу 'number' . Мы должны проверить их с помощью метода Number.isNaN().

Для BigInt:

 typeof 2n === 'bigint';

Для строк:

typeof '' === 'string';
typeof 'foo' === 'string';

Для символов:

typeof Symbol() === 'symbol'
typeof Symbol('bar') === 'symbol'

Также, можно использовать typeof для определения типа undefined:

typeof undefined === 'undefined';
let x;
typeof x === 'undefined';

Можно использовать для объектов, однако все объекты возвращают тип 'object', так что это не очень полезно:

typeof new String('foo') === 'object';
typeof new Number(1) === 'object';

Некоторые старые браузеры возвращают «функцию», когда мы применяем оператор typeof к литералам регулярных выражений. Однако сегодня это не должно быть проблемой.

Исключения

Typeof document.all всегда возвращает undefined, даже если он определен во всех браузерах.

Оператор instanceof

Оператор instanceof проверяет, появляется ли свойство прототипа конструктора где-либо в цепочке прототипов объекта.

Это означает, что мы можем использовать его, чтобы проверить, является ли объект конструктором из данного класса или функции-конструктора.

Он возвращает true, если объект является экземпляром класса или функции-конструктора, и false в противном случае.

Например, если у нас есть:

class Foo {};
let foo = new Foo();
console.log(foo instanceof Foo);
function Bar (){};
let bar = new Bar();
console.log(bar instanceof Bar);

В терминале будет два "true"

Все, что создано с помощью new, можно проверить с помощью оператора instanceof.

Instanceof полезен для проверки всего, что создано с помощью оператора new, включая строки, логические значения и числа.

Например, если у нас есть:

let foo = new String('foo');
console.log(typeof foo);
console.log(foo instanceof String);

Затем мы получаем 'object' из первого console.log и true для второго.

Это связано с тем, что мы создали экземпляр объекта String вместо строки примитивного значения, хотя в противном случае мы можем использовать примитивную строку и строковые объекты таким же образом.

Литеральные объекты

Литералы объектов, созданные без оператора new, являются экземплярами Object.

Итак, если у нас есть:

console.log({} instanceof Object);

Выведется 'true'

Все объекты являются экземплярами Object в дополнение к тому, что они являются экземплярами конструктора, из которого они созданы. Например, если у нас есть:

let date = new Date();
console.log(date instanceof Object);
console.log(date instanceof Date);

В обоих случаях выведутся значение true, поскольку date является экземпляром конструктора Date, а все непримитивные объекты являются экземплярами Object.

Выводы

Оператор typeof и instanceof совершенно разные. typeof возвращает тип объекта, над которым он работает.

Instanceof of возвращает true, если объект создан из данного конструктора, и false в противном случае.

Все непримитивные объекты являются экземплярами Object, поэтому он всегда будет возвращать true.

Комментарии (14)


  1. space2pacman
    07.07.2022 20:01
    +13

    на первый взгляд они похоже

    На какой такой взгляд? Что за дичь? В интернете совсем нечего переводить? Теперь мусор будем постить?

    У меня от статьи квартиру затопило.


    1. debagger
      07.07.2022 20:30

      А у меня кресло сгорело.


    1. Lazytech
      08.07.2022 06:46

      Я прочитал немало статей по JavaScript, и эта далеко не худшая. Предлагаю не судить об оригинале по переводу. :)


  1. dopusteam
    07.07.2022 20:15
    +2

    1. Lazytech
      08.07.2022 10:02
      +1

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


  1. Hrodvitnir
    07.07.2022 20:41
    +1

    Один проверяет цепочку прототипов, а другой смотрит что за тип у переменной. Так что вся статья это попытка отделить теплое от мягкого.

    Зачем переводить примитивные вещи? Ну не можете свое написать, ну возьмите какой-нибудь интересную тему и сделайте исследование по теме. Разберитесь в вопросе и напишите свою статью. Пускай будет плохая и унылая, но зато своя.

    Почему все просто рвутся набрать плюсов на переводах всякой фигни?


    1. IB2022
      07.07.2022 22:40

      Чтобы ответить на ваши вопросы достаточно понимать, сколько времени (и не только) уходит на свою статью и вот это.


  1. CoolCmd
    07.07.2022 22:34
    +3

    даю идею для следующей гениальной статьи: сравнение операторов сравнения и присвоения.
    не благодари.


  1. Cryvage
    08.07.2022 01:59
    +1

    Если у нас есть числа, больше числа, строки, символы, логические или неопределенные значения

    Более полезно, когда у нас есть переменные

    Не удержался
    У нас было 2 массива строк, 75 больших чисел, 5 логических значений, пол-килобайта символов и гора объектов всех разновидностей и цветов, а ещё литерал строки, объектный литерал, WeakMap и половина переменных с неопределённым значением. Не то, чтобы это всё было нужно в нашем коде, но раз начал писать на JavaScript, то иди в своём увлечении до конца. Единственное, что меня беспокоило — это undefined. В мире нет никого более беспомощного, безответственного и безнравственного, чем человек отлаживающий ошибки, связанные с undefined в JS коде. И я знал, что довольно скоро мы в это окунёмся.

    Может в английском «we have» и звучит нормально, в данном контексте, но по русски это звучит просто смешно. Статья, сама по себе, очень слабая, и местами даже вредная, но вам удалось её ухудшить.
    Ещё и пропустили абзац про Multiple Frames and Windows. Это важное ограничение instanceof. Я было хотел поругать автора за то, что не упомянул это, но в английском оригинале про это написано, хотя и без детальных пояснений.
    Instanceof полезен для проверки всего, что создано с помощью оператора new, включая строки, логические значения и числа.

    А вот за это автору оригинала надо поставить двойку. Формально, оператор instanceof действительно сработает для примитива, если тот был создан с помощью new. Но говорить что он в этом случае полезен — это преступление. Напротив, это выстрел в ногу. В том участке кода, где вам может понадобится проверка, вы никогда не будете знать, как было создано значение, вы не можете знать, использовался ли оператор new или нет, следовательно, не можете на это полагаться. Вы потому и проверяете, что не знаете, что там. Поэтому, никогда нельзя проверять с помощью instanceof те типы, для которых есть отдельное значение у оператора typeof: string, number, boolean, bigint, symbol.


    1. IB2022
      08.07.2022 09:16

      Статья, сама по себе, очень слабая, и местами даже вредная, но вам удалось её ухудшить.

      Движение вниз)


  1. Lazytech
    08.07.2022 05:39

    Цельнотянутый машинный перевод детектед.


  1. Kuch
    08.07.2022 08:07

    Вот вы ругаетесь на примитивность статьи, а я подписан в RSS на медиум и там каждый день статьи не выше уровня "чем отличается map от foreach". Хотя наверное это тот же уровень


  1. alexshipin
    08.07.2022 09:48

    Спасибо за две полностью одинаковых статьи об этом с разницей в пару часов.

    Хотя, если они отличаются немного оформлением заголовков внутри статьи, то они разные?


  1. sanchezzzhak
    08.07.2022 10:46

    И не слово про void 0, который считается не изменяемым типом undefined.