Шаблоны для наследования объектов в JavaScript ES2015

С долгожданным появлением ES2015 (ранее известный как ES6), JavaScript оснащен синтаксисом специально для определения классов. В этой статье я собираюсь исследовать, можем ли мы использовать синтаксис классов для составления классов из более мелких частей.

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

Представьте, что мы создаем игру, в которой игрок живет в мире животных. Некоторые из них друзья, другие враждебны (собачий человек, как я, может сказать, что все кошки — враждебные существа). Мы могли бы создать класс HostileAnimal , который расширяет Animal , чтобы служить базовым классом для Cat . В какой-то момент мы решили добавить роботов, предназначенных для нанесения вреда людям. Первое, что мы делаем, это создаем класс Robot . Теперь у нас есть два класса, которые имеют похожие свойства. HostileAnimal и Robot могут attack() .

Если бы мы могли как-то определить враждебность в отдельном классе или объекте, скажем, Hostile , мы могли бы использовать это для обоих Cat качестве Robot . Мы можем сделать это различными способами.

Множественное наследование — это функция, поддерживаемая некоторыми классическими языками ООП. Как следует из названия, оно дает нам возможность создать класс, который наследуется от нескольких базовых классов. Посмотрите, как класс Cat расширяет несколько базовых классов в следующем коде Python:

 class Animal(object): def walk(self): # ... class Hostile(object): def attack(self, target): # ... class Dog(Animal): # ... class Cat(Animal, Hostile): # ... dave = Cat(); dave.walk(); dave.attack(target); 

Интерфейс является общей чертой (типизированных) классических языков ООП. Это позволяет нам определить, какие методы (а иногда и свойства) должен содержать класс. Если этого класса нет, компилятор выдаст ошибку. Следующий код TypeScript вызовет ошибку, если у Cat не будет методов attack() или walk() :

 interface Hostile { attack(); } class Animal { walk(); } class Dog extends Animal { // ... } class Cat extends Animal implements Hostile { attack() { // ... } } 

Множественное наследование страдает от проблемы алмаза (где два родительских класса определяют один и тот же метод). Некоторые языки решают эту проблему, внедряя другие стратегии, такие как миксины . Миксины — это крошечные классы, которые содержат только методы. Вместо расширения этих классов, миксины включены в другой класс. Например, в PHP миксины реализованы с использованием черт.

 class Animal { // ... } trait Hostile { // ... } class Dog extends Animal { // ... } class Cat extends Animal { use Hostile; // ... } class Robot { use Hostile; // ... } 

Напомним: синтаксис класса ES2015

Если у вас не было возможности погрузиться в классы ES2015 или вы чувствуете, что недостаточно знаете о них, обязательно прочитайте Джеффа Мотта « Объектно-ориентированный JavaScript — глубокое погружение в классы ES6», прежде чем продолжить.

В двух словах:

• class Foo { ... } описывает класс с именем Foo
• class Foo extends Bar { ... } описывает класс Foo , расширяющий другой класс, Bar

Внутри блока класса мы можем определить свойства этого класса. Для этой статьи нам нужно только понять конструкторы и методы:

• constructor() { ... } — зарезервированная функция, которая выполняется при создании ( new Foo() )
• foo() { ... } создает метод с именем foo

Синтаксис класса в основном является синтаксическим сахаром над моделью-прототипом JavaScript. Вместо создания класса он создает конструктор функции:

 class Foo {} console.log(typeof Foo); // "function" 

Отсюда следует, что JavaScript не является языком ООП на основе классов. Можно даже утверждать, что синтаксис обманчив, создавая впечатление, что это так.

Составление классов ES2015

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

 class IAnimal { walk() { throw new Error('Not implemented'); } } class Dog extends IAnimal { // ... } const robbie = new Dog(); robbie.walk(); // Throws an error 

 function MyFunction () { this.myOwnProperty = 1; } MyFunction.prototype.myProtoProperty = 2; const myInstance = new MyFunction(); // logs "1" console.log(myInstance.myOwnProperty); // logs "2" console.log(myInstance.myProtoProperty); // logs "true", because "myOwnProperty" is a property of "myInstance" console.log(myInstance.hasOwnProperty('myOwnProperty')); // logs "false", because "myProtoProperty" isn't a property of "myInstance", but "myInstance.__proto__" console.log(myInstance.hasOwnProperty('myProtoProperty')); 

 class Animal { walk() { // ... } } class Dog { // ... } Object.assign(Dog.prototype, Animal.prototype); 

 Object.assign(Cat.prototype, { attack: Hostile.prototype.attack, walk: Animal.prototype.walk, }); 

 const Animal = { walk() { // ... }, }; const Hostile = { attack(target) { // ... }, }; class Cat { // ... } Object.assign(Cat.prototype, Animal, Hostile); 

 class Answer { constructor(question) { return { answer: 42, }; } } // { answer: 42 } new Answer("Life, the universe, and everything"); 

 const Animal = { walk() { // ... }, }; const Hostile = { attack(target) { // ... }, }; class Cat { constructor() { // Cat-specific properties and methods go here // ... return Object.assign( {}, Animal, Hostile, this ); } } 

 class Cat { constructor() { this.purr = () => { // ... }; return Object.assign( {}, Animal, Hostile, this ); } } 

 const createCat = () => Object.assign({}, Animal, Hostile, { purr() { // ... } }); const thunder = createCat(); thunder.walk(); thunder.attack(); 

 class Animal { // ... } class Robot { // ... } 

 const Hostile = (Base) => class Hostile extends Base { // ... }; 

 class Dog extends Animal { // ... } class Cat extends Hostile(Animal) { // ... } class HostileRobot extends Hostile(Robot) { // ... } 

 class Cat extends Demonic(Hostile(Mammal(Animal))) { // ... } 

 class Robot extends Hostile(Object) { // ... }