Что такое наследование в JavaScript

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

Операционная среда этого руководства: система Windows 10, версия JavaScript 1.8.5, компьютер Dell G3.

Что такое наследование в JavaScript

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

Он поддерживает отношения IS-A.

Ключевое слово Extensions используется в выражениях классов или объявлениях классов.

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

Мы также можем реализовать наследование, используя подход на основе прототипов.

Как JavaScript реализует наследование?

1. Цепочка прототипов

Основная идея: используйте прототипы, чтобы один ссылочный тип мог наследовать свойства и методы другого ссылочного типа.

Отношения между конструкторами, прототипами и экземплярами. Каждый конструктор имеет объект-прототип, объект-прототип содержит указатель на конструктор, а экземпляр содержит внутренний указатель на объект-прототип.

Пример наследования реализации цепочки прототипов:

function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function() {return this.property;}function subType() {this.property = false;}//Inherited SuperTypeSubType.prototype = new SuperType ( );SubType.prototype.getSubValue = function (){return this.property;}var экземпляр = новый SubType();console.log(instance.getSuperValue());//true

2. Заимствовать конструктор

Основная идея: вызовите конструктор суперкласса внутри конструктора подтипа, и конструктор можно будет выполнить для вновь созданного объекта с помощью методов call() и apply().

пример:

function SuperType() {this.colors = ["red","blue","green"];}function SubType() {SuperType.call(this);//Наследует SuperType}var instance1 = new SubType(); .colors.push("black");console.log(instance1.colors);//"red","blue","green","black"var instance2 = new SubType();console.log(instance2 . цвета);//"красный","синий","зеленый"

3. Комбинированное наследование

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

пример:

function SuperType(name) {this.name = name;this.colors = ["красный","синий","зеленый"];}SuperType.prototype.sayName = function() {console.log(this.name); }function SubType(name, age) {SuperType.call(this,name);//Унаследованный атрибут this.age = age;}//Унаследованный метод SubType.prototype = new SuperType();Subtype.prototype.constructor = Subtype; Subtype.prototype.sayAge = function() {console.log(this.age);}var instance1 = new SubType("EvanChen",18);instance1.colors.push("black");consol.log(instance1. цвета);//"красный","синий","зеленый","черный"instance1.sayName();//"EvanChen"instance1.sayAge();//18var instance2 = new SubType("EvanChen666",20 );console.log(instance2.colors);//"red","blue","green"instance2.sayName();//"EvanChen666"instance2.sayAge();//20

4. Прототипическое наследование

Основная идея: прототипы позволяют создавать новые объекты на основе существующих без необходимости создавать собственные типы.

Идею прототипного наследования можно проиллюстрировать следующей функцией:

function object(o) {function F(){}F.prototype = o;вернуть новый F();}

пример:

var person = {name:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = object(person);anotherPerson.name = "Greg";anotherPerson.friends.push( "Роб");var YetAnotherPerson = object(person);yetAnotherPerson.name = "Линда";yetAnotherPerson.friends.push("Барби");console.log(person.friends);//"Шелби","Суд" ,"Ван","Роб","Барби"

ECMAScript 5 стандартизирует прототипное наследование с помощью нового метода Object.create(), который принимает два параметра: объект, используемый в качестве прототипа нового объекта, и объект, используемый в качестве нового объекта для определения дополнительных свойств.

var person = {name:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = Object.create(person);anotherPerson.name = "Greg";anotherPerson.friends. push("Роб");var YetAnotherPerson = Object.create(person);yetAnotherPerson.name = "Линда";yetAnotherPerson.friends.push("Барби");console.log(person.friends);//"Шелби" ,"Суд","Ван","Роб","Барби"

5. Паразитарное наследование

Основная идея: создать функцию, которая просто инкапсулирует процесс наследования, каким-то образом расширяет объект внутри и возвращает объект, как если бы он действительно выполнил всю работу.

пример:

function createAnother(original) {var clone = object(original);clone.sayHi = function () {alert("hi");};return clone;}var person = {name:"EvanChen",friends:["Shelby ","Суд","Ван"];};var anotherPerson = createAnother(person);anotherPerson.sayHi();///"привет"

6. Паразитарное комбинаторное наследование.

Основная идея: наследовать свойства путем заимствования функций и наследовать методы через гибридную форму цепочки прототипов.

Его базовая модель выглядит следующим образом:

function inheritProperty(subType, superType) {var Prototype = object(superType.prototype);//Создаем объект Prototype.constructor = subType;//Улучшаем объект subType.prototype = Prototype;//Указываем объект}

пример:

function SuperType(name){this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function (){alert(this.name);}; function SubType(name,age){SuperType.call(this,name);this.age = age;}inheritProperty(SubType,SuperType);SubType.prototype.sayAge = function() {alert(this.age);}