Часто на собеседовании опытный разработчик может спросить у начинающего: «Что такое __proto__ и prototype, и чем они отличаются?». Обычно этот вопрос либо ставит в тупик, либо на него отвечают заученной мантрой из видео «50 вопросов на собеседовании»: « __proto__ — это ссылка на prototype, а prototype — это собственно свойство». И этот ответ правильный, только большинство недавно пришедших в профессию разработчиков не понимают, что это значит на самом деле. Причина проста — они не встречают в разработке ни __proto__, ни prototype, потому что современные стандарты JS прячут от него работу с этими свойствами за синтаксический сахар. Эта статья для таких, как я — разработчиков, которые столкнулись с JS в то время, когда никаких __proto__ и prototype на поверхности уже нет, а желание понять, как это устроено "под капотом" остается.
Разбираемся с объектами в JavaScript
7 min
24KTranslation
В этом материале автор — фронтенд-разработчик — сделал обзор основных способов создания, изменения и сравнения объектов JavaScript.
Объекты — одно из основных понятий в JavaScript. Когда я только приступил к их изучению, они показались мне довольно простыми: всего лишь пары ключей и значений, как и описывалось в теории.
Лишь спустя некоторое время я начал понимать, что тема гораздо сложнее, чем я полагал. И тогда я стал изучать информацию из разных источников. Некоторые из них давали хорошее представление о предмете, но увидеть всю картину целиком я смог не сразу.
В этом посте я попытался охватить все аспекты работы с объектами в JS, не вдаваясь слишком глубоко в отдельные подробности, но и не упуская важные детали, которые помогут вам понять предмет и почувствовать себя увереннее во время его дальнейшего изучения.
Итак, давайте начнем с основ.
Объект в JavaScript — это просто набор свойств, каждое из которые представляет собой пару ключ-значение. Обратиться к ключам можно с помощью точечного (obj.a) или скобочного обозначения (obj['a']).
Помните, что скобки следует использовать, если ключ:
Одно из свойств, которое объекты в JS получают при создании, называется Prototype, и это очень важное понятие.
Объекты — одно из основных понятий в JavaScript. Когда я только приступил к их изучению, они показались мне довольно простыми: всего лишь пары ключей и значений, как и описывалось в теории.
Лишь спустя некоторое время я начал понимать, что тема гораздо сложнее, чем я полагал. И тогда я стал изучать информацию из разных источников. Некоторые из них давали хорошее представление о предмете, но увидеть всю картину целиком я смог не сразу.
В этом посте я попытался охватить все аспекты работы с объектами в JS, не вдаваясь слишком глубоко в отдельные подробности, но и не упуская важные детали, которые помогут вам понять предмет и почувствовать себя увереннее во время его дальнейшего изучения.
Итак, давайте начнем с основ.
Объект
Объект в JavaScript — это просто набор свойств, каждое из которые представляет собой пару ключ-значение. Обратиться к ключам можно с помощью точечного (obj.a) или скобочного обозначения (obj['a']).
Помните, что скобки следует использовать, если ключ:
- не является допустимым JavaScript-идентификатором (в нем есть пробел, тире, начинается с цифры...)
- является переменной.
Одно из свойств, которое объекты в JS получают при создании, называется Prototype, и это очень важное понятие.
+10
Понимание ООП на джаваскрипте (ES5), часть 2
12 min
44KTutorial
Translation
Замечания о переводе
Поднимаю продолжение заброшенного перевода, поскольку вопросы в оригинале вплотную переплетаются с вопросами наследования, сделанными в собственной компактной библиотеке для использования без фреймворков, имеющих поддержку ООП. Пусть то и другое не оригинально, но вместе даёт понимание работы наследования.
Для полноты статьи и единого стиля, перевод начинается с вопросов наследования, несмотря на то, что они уже были упомянуты в конце первой части. Далее рассматриваются разнообразные задачи наследования так, как их рассмотрел автор. Надо сказать, что автор широко использует новые конструкции ES5 (объяснив это в конце), которые работают не во всех браузерах и заслоняют от понимания реализацию их на низком уровне языка, на котором они изначально применялись. Для настоящего понимания наследования следует обратиться к более глубокому разбору реализаций или к реализациям методов-обёрток из ES5: Object.create, Object.defineProperty, Function.bind, get и set literals, Object.getOwnPropertyNames, Object.defineProperty, Object.getOwnPropertyDescriptor, Object.getPrototypeOf. Часть их разбирается в статье (Object.create, get и set, Object.defineProperty, bind), но не всегда в порядке появления. Таким образом, статья стремится преподнести не реализацию наследования вообще, а ту реализацию, которую успели формализовать в рабочем черновике стандарта EcmaScript 5. Это лучше, чем ничего, но несколько меньше, чем полное понимание реализаций наследования.
Зато, данная часть статьи в нескольких (4) крупных примерах кода демонстрирует чистейшее прототипное наследование, которому не требуется привлекать понятие конструктора (хотя он там, в .create(), незримо присутствует), о котором много говорят и которое исключительно редко в чистом виде встречается.
Для полноты статьи и единого стиля, перевод начинается с вопросов наследования, несмотря на то, что они уже были упомянуты в конце первой части. Далее рассматриваются разнообразные задачи наследования так, как их рассмотрел автор. Надо сказать, что автор широко использует новые конструкции ES5 (объяснив это в конце), которые работают не во всех браузерах и заслоняют от понимания реализацию их на низком уровне языка, на котором они изначально применялись. Для настоящего понимания наследования следует обратиться к более глубокому разбору реализаций или к реализациям методов-обёрток из ES5: Object.create, Object.defineProperty, Function.bind, get и set literals, Object.getOwnPropertyNames, Object.defineProperty, Object.getOwnPropertyDescriptor, Object.getPrototypeOf. Часть их разбирается в статье (Object.create, get и set, Object.defineProperty, bind), но не всегда в порядке появления. Таким образом, статья стремится преподнести не реализацию наследования вообще, а ту реализацию, которую успели формализовать в рабочем черновике стандарта EcmaScript 5. Это лучше, чем ничего, но несколько меньше, чем полное понимание реализаций наследования.
Зато, данная часть статьи в нескольких (4) крупных примерах кода демонстрирует чистейшее прототипное наследование, которому не требуется привлекать понятие конструктора (хотя он там, в .create(), незримо присутствует), о котором много говорят и которое исключительно редко в чистом виде встречается.
Краткое содержание первой части
1. Объекты
1.1 Что есть объекты? (список свойств)
1.2 Создание свойств (Object.defineProperty)
1.3 Описатели свойств (Object.defineProperty)
1.4 Разбор синтаксиса (bracket notation: object['property'])
1.5 Доступ к свойствам (через скобочную нотацию)
1.6 Удаление свойств (оператор delete)
1.7 Геттеры и сеттеры (методы доступа и записи)
1.8 Списки свойств (getOwnPropertyNames, keys)
1.9 Литералы (базовые операторы) объекта
2. Методы
2.1 Динамический this
2.2 Как реализован this
2.2.1 Если вызывается как метод объекта
2.2.2 При обычном вызове функции (this === global)
2.2.3 При явном указании контекста (.apply, .call)
2.3 Привязывание методов к контексту (.bind)
1.1 Что есть объекты? (список свойств)
1.2 Создание свойств (Object.defineProperty)
1.3 Описатели свойств (Object.defineProperty)
1.4 Разбор синтаксиса (bracket notation: object['property'])
1.5 Доступ к свойствам (через скобочную нотацию)
1.6 Удаление свойств (оператор delete)
1.7 Геттеры и сеттеры (методы доступа и записи)
1.8 Списки свойств (getOwnPropertyNames, keys)
1.9 Литералы (базовые операторы) объекта
2. Методы
2.1 Динамический this
2.2 Как реализован this
2.2.1 Если вызывается как метод объекта
2.2.2 При обычном вызове функции (this === global)
2.2.3 При явном указании контекста (.apply, .call)
2.3 Привязывание методов к контексту (.bind)
Cодержание части 2
План части 3
4. Конструкторы
4.1 Магия оператора new
4.2 Наследование с конструкторами
5. Соглашения и совместимость
5.1 Создание объектов
5.2 Определение свойств
5.3 Списки свойств
5.4 Методы связывания
5.5 Получение [[Prototype]]
5.6 Библиотеки обратной совместимости
6. Синтаксические обёртки
7. Что читать дальше
8. Благодарности
Примечания
4.1 Магия оператора new
4.2 Наследование с конструкторами
5. Соглашения и совместимость
5.1 Создание объектов
5.2 Определение свойств
5.3 Списки свойств
5.4 Методы связывания
5.5 Получение [[Prototype]]
5.6 Библиотеки обратной совместимости
6. Синтаксические обёртки
7. Что читать дальше
8. Благодарности
Примечания
3. Прототипное наследование
До сих пор мы рассматривали, как определяются методы в объектах и как их повторно используют в других объектах при явном указании контекста, но это — всё же не лучший путь использования и расширения объектов.
Далее в игру вступает наследование. Оно лучше разделяет понятия, когда объекты наделяются своими методами на основе методов других объектов.
Прототипное наследование идёт дальше и может избирательно расширять методы, описывать общее поведение и использовать другие занятные приёмы, которых мы коснёмся. Печалит лишь то, что модель наследования в JS немного ограничена, и для обхода трудностей эти приёмы будут временами
+42
Прототипы в JS и малоизвестные факты
7 min
48KЛирическое вступление
Получив в очередной раз кучу вопросов про прототипы на очередном собеседовании, я понял, что слегка подзабыл тонкости работы прототипов, и решил освежить знания. Я наткнулся на кучу статей, которые были написаны либо по наитию автора, как он "чувствует" прототипы, либо статья была про отдельную часть темы и не давала полной картины происходящего.
Оказалось, что есть много неочевидных вещей из старых времён ES5 и даже ES6, о которых я не слышал. А еще оказалось, что вывод консоли браузера может не соответствовать действительности.
+19