41. Наследование классов

JavaScript: Мозги. Урок: Наследование классов

Иллюстрация к уроку В этом уроке мы разберем, как классы могут наследовать свойства и методы друг от друга, что позволяет создавать более организованный и повторно используемый код. Наследование – это один из ключевых принципов объектно-ориентированного программирования (ООП).

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

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

Представьте, что у нас есть класс Animal (животное) с общими свойствами для всех животных, такими как name (имя) и метод eat(). Затем мы можем создать класс Dog, который наследует от Animal, и добавляет специфические свойства и методы для собак, например, bark() (лаять).

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} ест.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    // Вызываем конструктор родительского класса
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log("Гав!");
  }
}

const myDog = new Dog("Бобик", "Дворняга");
myDog.eat(); // Выводит: Бобик ест.
myDog.bark(); // Выводит: Гав!
console.log(myDog.name); // Выводит: Бобик
console.log(myDog.breed); // Выводит: Дворняга

В этом примере Dog наследует метод eat() от Animal и имеет свой собственный метод bark(). Ключевое слово extends указывает на то, что класс Dog наследует от Animal. super(name) вызывает конструктор родительского класса Animal и передает ему имя.

Практические примеры

Рассмотрим другой пример с геометрическими фигурами:

class Shape {
  constructor(color) {
    this.color = color;
  }

  describe() {
    console.log(`Это фигура цвета ${this.color}.`);
  }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color);
    this.radius = radius;
  }

  calculateArea() {
    return Math.PI * this.radius * this.radius;
  }

  describe() {
    // Переопределяем метод describe() родительского класса
    super.describe(); // Вызываем метод describe() родительского класса
    console.log(`Это круг с радиусом ${this.radius}.`);
  }
}

const myCircle = new Circle("красный", 5);
myCircle.describe(); // Выводит: Это фигура цвета красный. Это круг с радиусом 5.
console.log(`Площадь круга: ${myCircle.calculateArea()}`); // Выводит: Площадь круга: 78.53981633974483

Здесь класс Circle наследует от Shape и добавляет свойство radius и метод calculateArea(). Обратите внимание на переопределение метода describe(). Мы можем переопределить методы родительского класса в дочернем классе. При этом, мы можем вызвать оригинальный метод родительского класса, используя super.describe().

Жизненный пример

Наследование широко используется в фреймворках и библиотеках JavaScript, таких как React, Angular и Vue.js. Например, в React компоненты часто создаются путем наследования от базового класса React.Component. Это позволяет переиспользовать логику и упрощает структуру приложения.

Представьте, что вы разрабатываете UI библиотеку. У вас есть базовый класс Button, от которого наследуются PrimaryButton, SecondaryButton и другие типы кнопок. Каждый подкласс может добавлять свою специфическую логику и стили, при этом переиспользуя общую логику из базового класса Button.

Ключевые моменты

Наследование позволяет создавать иерархию классов.
Дочерний класс наследует свойства и методы родительского класса.
Ключевое слово extends используется для указания наследования.
super() используется для вызова конструктора родительского класса.
Методы родительского класса могут быть переопределены в дочернем классе.
Наследование способствует повторному использованию кода и упрощает его организацию.