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

Что такое прототипы

Прототипы - это объекты, которые связаны почти с каждым объектом JavaScript, который действует как шаблон, наследующий методы и свойства. Это механизм, с помощью которого объекты JavaScript наследуют функции друг от друга. Свойства объекта в прототипе доступны и изменяются, однако они не видны. Важно знать, что обсуждаемый прототип НЕ является свойством прототипа функций конструктора.

Кроме того, в JavaScript прототип объекта (или его свойство _proto_) также может иметь объект-прототип, и этот прототип также может иметь прототип! Мы называем это цепочкой прототипов, и именно по этой причине разные объекты имеют свойства и методы, определенные для других доступных им объектов. Что касается цепочки прототипов, между экземпляром объекта и его прототипом устанавливается связь, и можно найти свойства и методы, пройдя по цепочке прототипов. Давайте глубже погрузимся в прототипы и посмотрим, что внутри.

Анализ прототипа

Я собираюсь показать вам пример объекта Dog, использующего консоль в вашем браузере (Cmd + option + J), и я рекомендую вам следовать за ним. Мы начнем с написания функции-конструктора для объекта собаки с именем Dog (). Функция-конструктор примет имя, возраст и породу и создаст экземпляр объекта собаки.

Теперь, когда мы создали функцию-конструктор для объекта dog, давайте создадим экземпляр собаки. Мы сделаем образец собаки по имени Фидо, трехлетнего золотистого ретривера.

Если после создания экземпляра dog для Fido мы начнем вводить «dog1». вы увидите, что браузер пытается автоматически заполнить ваш оператор именами членов, доступными для объекта. В списке вы увидите все члены (имя, возраст, порода), определенные в конструкторе Dog (), который теперь является конструктором dog1, поскольку это объект Dog. По сути, происходит то, что dog1 наследует свой прототип от конструктора Dog ().

Вы также заметите, что есть другие члены списка, которые не были напрямую определены в функции конструктора Dog (). Эти члены фактически определены в объекте-прототипе объекта-прототипа dog1. Таким образом, из конструктора Dog () конструктор также наследуется от Object.prototype через собственный прототип! Как я уже говорил выше, это также известно как цепочка прототипов. Теперь вы, вероятно, спрашиваете себя: «Можно ли назвать эти методы?». Что ж, давай попробуем.

Я вызвал функцию valueOf () на dog1, которая вернула мне объект Dog из Fido. Функция valueOf () возвращает значение объекта, для которого она вызывается. Причина, по которой я вызвал функцию, заключалась в том, чтобы просмотреть процесс того, как браузер находит и возвращает значение объекта. Браузер начинает с проверки, действительно ли у объекта есть метод valueOf (), доступный для него из конструктора Dog (). Поскольку в конструкторе Dog () не определен метод с именем valueOf, он проверяет, есть ли у объекта-прототипа dog1 доступный метод valueOf (), которого у него нет. Наконец, браузер проверит объект-прототип объекта-прототипа dog1, чтобы найти метод valueOf, который он находит и вызывает!

Это отличный пример того, как методы и свойства НЕ копируются из одного объекта в другой, но к ним можно получить доступ, поднимаясь по цепочке прототипов! Эти наследуемые свойства и методы определены в свойстве prototype или начинаются с Object.prototype. Таким образом, такие методы, как valueOf (), доступны для любых типов объектов, унаследованных от Object.prototype. Это также включает новые экземпляры объектов, которые создаются из конструкторов, таких как dog1.

Заключение

Прототипы! Разве они не просто персиковые! Надеюсь, это небольшое введение в прототипы поможет вам в навигации по JavaScript. Это определенно непростая идея для понимания и регулярного использования. Однако по мере того, как вы узнаете и прочтете о нем больше, вы увидите, насколько полезно понимать, где объекты наследуют его методы и свойства. В прототипы входит гораздо больше, и для изучения доступно множество методов и свойств. Поэтому я призываю вас продолжать учиться и копать глубже! Спасибо за чтение, надеюсь, вам понравилось!