JS Tower
JavaScript & TypeScriptМодуль 6: ООП и паттерны

Наследование

extends и super в классах

Цель урока

В этом уроке ты научишься:

  • Создавать дочерние классы
  • Использовать extends и super
  • Переопределять методы

extends

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} издаёт звук`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.name} лает`);
  }
}

let dog = new Dog("Бобик");
dog.speak(); // "Бобик издаёт звук"
dog.bark();  // "Бобик лает"

super

В конструкторе

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

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

let dog = new Dog("Бобик", "Овчарка");
console.log(dog.name);  // "Бобик"
console.log(dog.breed); // "Овчарка"

Важно

В дочернем конструкторе super() должен вызываться до обращения к this.

В методах

class Animal {
  speak() {
    console.log("Животное издаёт звук");
  }
}

class Dog extends Animal {
  speak() {
    super.speak(); // Вызов метода родителя
    console.log("Собака лает");
  }
}

let dog = new Dog();
dog.speak();
// "Животное издаёт звук"
// "Собака лает"

Переопределение методов

class Shape {
  getArea() {
    return 0;
  }
  
  describe() {
    return `Площадь: ${this.getArea()}`;
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }
  
  getArea() {
    return this.width * this.height;
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }
  
  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

let rect = new Rectangle(4, 5);
let circle = new Circle(3);

console.log(rect.describe());   // "Площадь: 20"
console.log(circle.describe()); // "Площадь: 28.27..."

Проверка типа

class Animal {}
class Dog extends Animal {}
class Cat extends Animal {}

let dog = new Dog();

console.log(dog instanceof Dog);    // true
console.log(dog instanceof Animal); // true
console.log(dog instanceof Cat);    // false

Статическое наследование

class Animal {
  static planet = "Земля";
  
  static describe() {
    return `Животные живут на планете ${this.planet}`;
  }
}

class Dog extends Animal {
  static describe() {
    return super.describe() + ". Собаки — друзья человека";
  }
}

console.log(Dog.planet);    // "Земля"
console.log(Dog.describe()); // "Животные живут... Собаки — друзья..."

Практика

Задание 1: Базовое наследование

Задача: Создай класс Employee, наследующий Person.

Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
Меня зовут Иван
Должность: Разработчик

Задание 2: Переопределение

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

Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
Машина едет

Проверь себя

  1. Что делает extends?
  2. Когда нужно вызывать super()?
  3. Как вызвать метод родителя?