Простое наследование с помощью JavaScript

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

Многие мои друзья разработчики на C # или C ++. Они привыкли использовать наследование в своих проектах, и когда они хотят изучать или открывать JavaScript, один из первых вопросов, который они задают: «Но как я могу сделать наследование с помощью JavaScript?»

На самом деле JavaScript использует иной подход, чем C # или C ++, для создания объектно-ориентированного языка. Это язык на основе прототипов. Концепция прототипирования подразумевает, что поведение может быть повторно использовано путем клонирования существующих объектов, которые служат прототипами. Каждый объект в JavaScript происходит от прототипа, который определяет набор функций и членов, которые объект может использовать. Там нет класса. Просто объекты. Каждый объект может быть использован в качестве прототипа для другого объекта.

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

Реализация наследования

Давайте представим, что мы хотим создать с помощью этой иерархии, используя JavaScript:

Прежде всего, мы можем легко создать ClassA. Поскольку явных классов не существует, мы можем определить набор поведения (класс так …), просто создав такую ​​функцию:

var ClassA = function() { this.name = "class A"; } 

Этот «класс» может быть создан с использованием new ключевого слова:

 var a = new ClassA(); ClassA.prototype.print = function() { console.log(this.name); } 

И использовать его, используя наш объект:

 a.print(); 

Довольно просто, правда?

Полный образец длиной всего 8 строк:

 var ClassA = function() { this.name = "class A"; } ClassA.prototype.print = function() { console.log(this.name); } var a = new ClassA(); a.print(); 

Теперь давайте добавим инструмент для создания «наследования» между классами. Этот инструмент просто должен сделать одну вещь: клонировать прототип:

 var inheritsFrom = function (child, parent) { child.prototype = Object.create(parent.prototype); }; 

Именно здесь происходит волшебство! Клонируя прототип, мы переносим все члены и функции в новый класс.

Поэтому, если мы хотим добавить второй класс, который будет дочерним по отношению к первому, мы просто должны использовать этот код:

 var ClassB = function() { this.name = "class B"; this.surname = "I'm the child"; } inheritsFrom(ClassB, ClassA); 

 var b = new ClassB(); b.print(); 

 class B 

 ClassB.prototype.print = function() { ClassA.prototype.print.call(this); console.log(this.surname); } 

 class B I'm the child 

 var ClassC = function () { this.name = "class C"; this.surname = "I'm the grandchild"; } inheritsFrom(ClassC, ClassB); ClassC.prototype.foo = function() { // Do some funky stuff here... } ClassC.prototype.print = function () { ClassB.prototype.print.call(this); console.log("Sounds like this is working!"); } var c = new ClassC(); c.print(); 

 class C I'm the grandchild Sounds like this is working!