JavaScript с нуля

Что же происходит под капотом?

Мы научились создавать объекты и производить с ними некоторые простые модификации. Так как объекты — это сердце всех возможностей JavaScript, то важно как можно лучше разобраться в происходящем. И не ради расширения багажа знаний, хоть это и помогло бы впечатлить друзей или родственников за ужином. Главная часть работы в JavaScript — это создание объектов на основе других объектов и выполнение традиционных, присущих объектному программированию действий. Все эти действия будут для вас гораздо понятнее, когда мы разберемся в том, что же происходит при работе с объектами.

Давайте вернемся к нашему объекту funnyGuy:

let funnyGuy = {};

Итак, что мы можем сделать с пустым объектом, не имеющим свойств? Неужели наш объект funnyGuy совсем одинок и изолирован от всего происходящего? В ответ эхом — нет. Причина скрыта в том, как создаваемые в JS объекты автоматически связываются с более крупным Object и всей присущей ему функциональностью. Лучшим способом понять эту связь будет визуализация. Сосредоточьтесь и внимательно рассмотрите рис. 18.1.

Рис. 18.1. Что на самом деле происходит с простым, казалось бы, объектом funnyGuy

Здесь отображено, что именно происходит за кадром, когда мы создаем пустой объект funnyGuy.

Рассмотрение этого представления начнем с самого объекта. Здесь все по-прежнему, а вот остальное уже отличается. Мы видим, что наш funnyGuy — это просто пустой объект. У него нет свойств, которые мы могли бы ему определить, но есть свойства, которые определяются по умолчанию. Эти свойства связывают объект funnyGuy с лежащим в основе типом Object, не требуя для этого нашего вмешательства. Эта связь позволяет вызывать стандартные свойства Object для funnyGuy:

let funnyGuy = {};

funnyGuy.toString(); // [объект Object]

Для ясности еще раз скажу, что именно эта связь позволяет вызвать toString для нашего кажущегося пустым объекта funnyGuy. Однако называть эту связь связью не совсем точно. Эта связь в действительности известна как прототип (и зачастую представлена как [[Prototype]]), который в итоге указывает на другой объект. Другой объект может иметь свой собственный [[Prototype]], который будет также указывать на другой объект, и т. д. Такой род связи называется цепочкой прототипов. Перемещение по цепочке прототипов — это существенная часть того, что делает JavaScript при поиске вызываемого вами свойства. В нашем случае это вызов toString для объекта funnyGuy, который визуально представлен на рис. 18.2.

Рис. 18.2. Переход по цепочке прототипов в поиске нужного свойства

В цепочке прототипов, даже если в нашем объекте не определено конкретное свойство, которое мы ищем, JavaScript все равно продолжит поиск по цепочке в попытке найти его в каждом последующем пункте. В нашем случае цепочка прототипов объекта funnyGuy состоит из прототипа самого этого объекта и Object.prototype, то есть является весьма простой. Когда же мы будем работать с более сложными объектами, цепочки будут становиться намного длиннее и сложнее. И вскоре мы это увидим.

Объект не является частью цепочки прототипа

В предыдущих визуализациях объекта мы видели выделенные точки соединения и линии, соединяющие его свойства с Object.prototype. Здесь стоит заметить, что объект не является частью цепочки прототипов. Он играет роль в том, как объекты реализуют связь между их конструктором и неудачно названным свойством prototype (не связанным с нашим [[Prototype]]), и мы еще коснемся этой его роли позднее. Я продолжу показывать роль объекта в будущих реализациях объектов, но помните, что он не принимает участия в проходе по цепочке прототипов.

Далее, как мы видим, наш объект funnyGuy очень прост. Давайте для интереса добавим в него свойства firstName и lastName:

let funnyGuy = {

firstName: "Conan",

lastName: "O'Brien"

};

На рис. 18.3 показано, как будет выглядеть наша прежняя визуализация при участии добавленных свойств.

Рис. 18.3. Поздоровайтесь с нашими старыми знакомыми firstName и lastName

Свойства firstName и lastName являются частью объекта funnyGuy и также представлены. Покончив с рассмотрением этих основ объекта, мы можем переходить к подробностям.