Подробное описание наследования в JavaScript

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

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

Создание цепочки прототипов

Цепочка прототипов означает, что свойство объекта dunder proto или proto будет указывать на другой объект, а не на функцию-конструктор prototype. Если свойство dunder proto или proto другого объекта указывает на другой объект, результатом будет цепочка. Это называется цепочкой прототипов.

Как показано на изображении ниже, свойство SubType объекта prototype указывает на SuperType объект. Свойство prototype объекта SuperType указывает на объект SuperSuperType. Это называется объединение прототипов.

Давайте реализуем цепочку прототипов

Приведенный выше код определяет две constructor функции, SuperType и SubType. По умолчанию SubType.prototype имеет функцию constructor , которая указывает на саму constructor функцию и свойство proto, которое наследует свойства объекта по умолчанию.

//Inherit the properties from SuperType
SubType.prototype = new SuperType();

Вышеупомянутая строка перезаписывает прототип по умолчанию или свойство dunder proto функции конструктора SubType и заставляет SubType.prototype указывать на объект функции конструктора SuperType.

Это означает, что все свойства и методы, существующие в экземпляре SuperType, теперь будут существовать и в SubType.prototype . Это означает, что теперь функция SubType имеет доступ ко всем свойствам и методам SuperType .

//Add new property to SubType prototype
SubType.prototype.getSubAge = function(){
	return this.age;
}

После того, как прототип функции конструктора SubType по умолчанию был перезаписан, с помощью приведенной выше строки кода мы добавляем новый метод getSubAge() поверх того, что было унаследовано от SuperType, к объекту прототипа SubType функция-конструктор.

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

Вывод в консоль

Примечание: метод getSuperName() остается в объекте SuperType.prototype, но свойство name заканчивается на SubType.prototype. Это потому, что getSuperName() - это метод-прототип, а свойство - свойство экземпляра. SubType.prototype теперь является экземпляром SuperType, поэтому свойство хранится там. Также обратите внимание, что SubType.prototype.constructor указывает на SuperType, потому что свойство конструктора в SubType.prototype было перезаписано.

Проблемы с цепочкой прототипов

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

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

Давайте попробуем разобраться в коде, мы определили функцию-конструктор SuperType с firstName, lastName , и friends в качестве свойств экземпляра, затем мы определили свойство superName в прототипе SuperType .

Теперь давайте посмотрим, как мы определили функцию-конструктор SubType.

Здесь мы определяем функцию-конструктор SubType . Внутри функции конструктора SubType мы вызываем функцию конструктора SuperType с call. Вызов выполняет функцию конструктора SuperType в контексте объекта, создаваемого с помощью функции конструктора SubType . После наследования свойств экземпляра SuperType мы добавляем одно свойство age к функции-конструктору SubType 

//Inherit methods and shared properties
SubType.prototype = new SuperType();

Пока мы только что унаследовали все свойства экземпляра функции конструктора SuperType , но общие свойства и методы функции конструктора SuperType все еще не унаследованы. Мы наследуем их, используя приведенные выше строки кода.

После выполнения вышеуказанных строк кода мы унаследовали все свойства функции конструктора SuperType .

Когда мы выполняем приведенную выше строку кода, все три параметра (Virat, Kohli и 26) передаются функции-конструктору SubType . SubType функция-конструктор затем вызывает SuperType функцию-конструктор, используя call SuperType.call(this, firstname, lastName) this, здесь представляет subTypeObj1

SuperType функция конструктора выполняется в контексте subTypeObj1 и добавляет свойства firstName, lastName, friends к объекту subTypeObj1. После возврата SuperType.call(this, firstname, lastName) функция конструктора SubType добавляет свойство age к объекту subTypeObj1.

Таким образом, на данный момент существуют свойства с объектом subTypeObj1 (firstName, lastName и age). В настоящее время функция-конструктор SubType имеет следующие методы и общие свойства в свойстве прототипа:

  1. getSuperName()
  2. getSubAge

subTypeObj1 наследует все эти свойства от функции конструктора SubType .

Если вам понравилась статья и вы хотите получать обновления о моей новой статье, подпишитесь на меня в среде и в твиттере @ happyrupesh123

Другие статьи:

  1. Понимание API веб-ресурсов
  2. Руководство по ReactJS для новичков
  3. Путешествие JavaScript: от загрузки сценария к выполнению
  4. Чем хороши прогрессивные веб-приложения и как их создать
  5. Давай получим это« это раз и навсегда»
  6. Работники сферы обслуживания
  7. Внедрение Service Workers
  8. Контекст выполнения в JavaScript
  9. Виртуальный DOM в ReactJS
  10. Прототипы в JavaScript
  11. ‘ This ’в JavaScript
  12. Object.create в JavaScript
  13. Наследование в JavaScript
  14. Создавать объекты на JavaScript
  15. Объекты в JavaScript
  16. Zip в Python
  17. Декораторы в Python
  18. Объединение двух списков в Python
  19. Лямбда, карта и фильтр в Python
  20. Составление списков в Python