Простое наследование в JavaScript: что нужно знать

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

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

Каждый объект в JavaScript зависит от прототипа, который определяет набор возможностей и членов, доступных объекту для использования. Нет класса как такового — только объекты. Любой объект может быть использован в виде прототипа для иного объекта.

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

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

Давайте взглянем на иерархию наследования, которую мы создадим, используя 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();

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

Весь пример занимает всего восемь строк кода:

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);

Поскольку ClassB наследует возможность print от ClassA, следующий программный код работает:

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

И создает такой отображение:

class B

Мы даже можем переопределить возможность print для ClassB:

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

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

class B I’m the child

Хитрость здесь в том, чтобы вызвать ClassA.prototype для получения базовой возможности print. Далее благодаря возможности call мы можем вызвать базовую возможность для текущего объекта(this).

Создание ClassC:

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 grandchildSounds like this is working!

И философии…

В заключение, я хочу объяснить, что JavaScript – это не C# или C++. У него философия. Если вы C# или C++ разработчик и действительно планируете ощутить всю силу JavaScript, лучший совет, который я могу вам дать: не пытайтесь применять методики объектно-ориентированного программирования в JavaScript. Не существует лучшего или худшего языка. Есть просто различные философии!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *