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...
Ваш вывод:
Ожидаемый результат:
Машина едет
Проверь себя
- Что делает
extends? - Когда нужно вызывать
super()? - Как вызвать метод родителя?