Понимание и использование прототипического наследования в JavaScript

Написано Райаном Телин, контрактным техническим писателем для образования. INC

JavaScript-это язык объектно-ориентированного языка программирования, основанный на прототипе. После обновлений ES6 JavaScript допустил «прототипическое наследование», что означает, что объекты и методы могут быть переданы, расширены и скопированы. Это облегчает наследство структуры (поля данных), поведения (функции/методов) и состояния (значения данных).

JavaScript является наиболее распространенным из языков, способных способным к прототипу, и его возможности относительно уникальны. При правильном использовании прототипическое наследование в JavaScript является мощным инструментом, который может сэкономить часы кодирования.

Сегодня мы хотим познакомить вас с прототипам наследием в JavaScript, чтобы вас в курсе возможностей ES6.

Мы рассмотрим следующее:

• Что такое прототипическое наследство?
• Минусы прототипического наследования
• Важные термины
• Настройка прототипических отношений
• Унаследованные методы
• Трехровневое наследование и масштабируемость
• Заворачивание и ресурсы

Что такое прототипическое наследство?

Проще говоря, прототипическое наследование относится к возможности доступа к свойствам объектов из другого объекта. Мы используем JavaScript Prototype Чтобы добавить новые свойства и методы к существующему конструктору объекта. Затем мы можем по существу сказать нашему коду JS наследовать свойства от прототипа. Прототипическое наследование позволяет нам повторно использовать свойства или методы от одного объекта JavaScript к другому с помощью функции эталонного указателя.

Все объекты JavaScript наследуют свойства и методы из прототипа:

• Дата Объекты наследуют от Date.prototype Анкет
• Массив Объекты наследуют от Array.Prototype Анкет
• Игрок Объекты наследуют от Player.Prototype Анкет

Object.Prototype находится на вершине цепочки наследования прототипа. ​ Дата Объекты, Массив Объекты и Игрок Объекты все наследуют от Object.Prototype Анкет

Изображение от DSINECOS

Пересмотр старого примера

Давайте пройдемся по примеру прототипического наследства, с которым вы, вероятно, знакомы из начальной школы: все квадраты – прямоугольники, но не все прямоугольники – это квадраты. Если бы мы думаем об этом как о программе JS, мы могли бы сказать, что прямоугольник является прототипом к квадрату: квадрат наследует все свойства прямоугольника (то есть четырехсайды и закрытые), а также добавление новой функции (то есть все стороны та же длины).

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

Мы можем видеть, как работает прототипа наследование на основе определения категорий в группе от наименее специфического к большинству – от прямоугольника к квадрату. В коде эта концепция иногда может быть потеряна в синтаксисе. Если вы обнаружите, что это произойдет, говорить по отношениям Между объектами и послушайте, где вы проводите различия. Если вы слышите: «Все ___ – это __, но … не все _ _ are___», вот где следует добавить новые прототипические отношения.

Минусы прототипического наследования

Прототипическое наследование явно имеет много преимуществ для программ JavaScript, но, как и все инструменты, оно имеет ограничения. Давайте посмотрим на ключевые недостатки, на которые нужно обратить внимание, когда вы пишете программу на основе прототипа:

• Наследование не может течь по кругу, так как это создаст ошибку. Например, если Пользователь Связанный Premiumfamily В качестве прототипа в вышеуказанной программе возникнет ошибка, поскольку это создаст цикл.

• Объекты не могут наследовать от нескольких прототипов. Как мы видели выше, они могут унаследовать свойства нескольких объектов через цепь, однако другой объект, связанный с прототипом, явно вызовет ошибку. Это так, даже если дополнительный прототип находится в одной цепочке. Например, FamilyPremium Не могло бы иметь явные ссылки на обоих Премиум и Пользователь Анкет

• Прототипические отношения могут быть сделаны только для объектов. Это потому, что __proto__ Функция работает в качестве перспективного, направляя программу, где найти значение, которое он ищет. Поскольку программа либо знает, где искать, либо нет, функция может быть только NULL или объект. Все остальные типы будут отброшены.

Важные термины

__proto__ собственность

В JavaScript у каждого объекта есть свое скрытое, внутреннее свойство, [[Прототип]] Анкет Мы можем получить доступ к этому [[Прототип]] используя __proto__ имущество. Это называет программу отметить объект шаблона как скрытый тип. Объекты JavaScript должны быть связаны с этим объектом прототипа. Теперь свойства объекта могут быть доступны объектом наследника.

Давайте посмотрим на синтаксис для доступа и настройки [[Прототип]] свойство объекта.

//using __proto__ to access and set the [[Prototype]] of "anObject"
anObject.__proto__ = someotherObject

Object.Create

JavaScript Ecmascript 5 поставляется с функцией Object.Create () Анкет Этот метод можно использовать для замены Новый Анкет Мы можем использовать его для создания пустого объекта на основе определенного прототипа, а затем назначить его другому прототипу. Взгляните на синтаксис:

Object.create(proto, [propertiesObject])

Object.Create Методы могут принять два аргумента: PropertiesObject и PrototypeObject Анкет

Object.Prototype.constructor

Все объекты имеют свойство конструктора. Если объект создается без использования функции конструктора, он будет иметь свойство конструктора. Свойство конструктора вернет ссылку на объект Объект Функция конструктора. Он вернется 1 , true1, и “Тест” `. Взгляните на пример ниже.

HasownProperty

Используя HasownProperty , мы можем проверить, содержит ли объект определенное свойство прототипа; Метод вернется Верно или ложный в зависимости Это поможет вам уточнить, имеет ли у объекта свое собственное свойство или вместо этого он наследует. Посмотрите на синтаксис ниже:

JS obj.hashownproperty (опора)

Прототип цепочка

Прототипическое наследование использует концепцию Прототип цепочек Анкет Давайте рассмотрим эту концепцию. Каждый созданный объект содержит [[Прототип]] , который указывает либо на другой объект, либо на нуль. Представьте объект C с [[Прототип]] свойство, которое указывает на объект B. объект B’s [[Прототип] ] свойство указывает на прототип объекта A. Это продолжается, образуя своего рода цепочку, называемую цепочкой прототипа.

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

Хотите узнать больше о прототипической цепочке? Проверьте курс Узнайте объектно-ориентированное программирование в JavaScript

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

Пример кода 1: Настройка прототипных отношений

Для этого первого примера мы напишем простые прототипические отношения между двумя объектами, Пользователь и PremiumUser , используя ._proto_ функция Каждый из этих объектов имеет свои собственные свойства, которые будут переданы среди всех учетных записей на этом уровне: все Пользователи иметь доступ к потоковым шоу, Showaccess и все PremiumUsers Отключить рекламу, Объявления

Прототипические отношения здесь гарантируют, что PremiumUser наследует Showaccess Свойство, установленное из Пользователь без необходимости установить его вручную на уровне премиум -класса. Чтобы убедиться, что это унаследовано должным образом, мы добавляем линию, чтобы консоль печатала текущее значение Showaccess для PremiumUser Анкет По мере возвращения Верно , мы видим это PremiumUser унаследовал это свойство от Пользователь Анкет

Пример кода 2: Методы наследования

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

Ключевым разделом этого примера является призыв трех методов внизу. Каждый из этих методов определяется под Пользователь объект и, следовательно, обычно был недоступен по PremiumUser Анкет Однако, потому что Пользователь это прототип PremiumUser , все методы и свойства Пользователь делятся любыми объектами наследника.

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

Пример кода 3: Трехровневое наследование и масштабируемость

Как вы могли заметить, приведенные выше примеры позволяют только одну учетную запись в Пользователь и одна учетная запись в PremiumUser Анкет Чтобы ввести столь необходимую масштабируемость, мы поворачиваем от использования этих объектов в качестве переменных и вместо этого используем их в качестве эквивалента классов. Вместо изменения значений свойств мы создаем новые объекты для каждой учетной записи, устанавливая прототип для этого нового объекта на основе уровня учетной записи.

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

Даже с тремя уровнями наследования мы видим, что я имеет доступ к данным по всей цепочке, от непосредственно унаследованного MultipledEvices собственность унаследованной AccountInfo Метод, определенный в верхней части своей цепи в Пользователь Анкет Независимо от того, сколько уровней имеет цепочка наследования, вся информация с предыдущих уровней сохраняется и доступна.

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

В результате мы получаем программу, которая является масштабируемой, адаптируемой и эффективной в выполнении, все это возможно благодаря подходу на основе прототипа.

Завершение и пример реального мира

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

Например, AngularJS использует иерархические Прицелы Для наследственного значений данных для привязки данных отображается на веб -страницах. A Сайт Объект Scope может определить значения для Название и Iconimg Для веб -сайта, затем индивидуальный Страница Объекты Scope могут использовать прототипные ссылки, чтобы разрешить обмен этими общими значениями данных. Это также позволяет настраивать отдельные веб -страницы, переоценивая или увеличивая наследственные значения для определенных страниц.

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

Ресурсы и дальнейшее чтение

Статьи

• 15 лучших курсов JavaScript : Заинтересованы в том, чтобы чистить JavaScript и прототипные навыки наследования? Взгляните на эту статью, чтобы начать.

• Полный аварийный курс для ES6 и за его пределами : Ищете обзор ES6 JavaScript? Эта статья об ускоренном курсе проходит через этот современный JavaScript с ES6 и за его пределами.

• Путешествие к тому, чтобы стать полноценным разработчиком JS JS, начинается здесь : Только начинаете свое путешествие в качестве разработчика JavaScript? В этой статье учат начинающих разработчиков все шаги необходимости.

Основные курсы

• JavaScript на практике: Начиная
• JavaScript на практике: ES6 и за его пределами
• Справочник по интервью JavaScript: 100+ Вопросы интервью
• Узнайте объектно-ориентированное программирование в JavaScript

Оригинал: “https://dev.to/educative/understanding-and-using-prototypal-inheritance-in-javascript-5fo7”