JS властивість Class.extends

Загальний опис

Ключове слово extends в JavaScript є основним елементом для реалізації наслідування в мові. Воно дозволяє новому класу успадковувати властивості та методи від існуючого класу, роблячи ваш код більш модульним, зрозумілим та легшим для підтримки.

Використання ключового слова extends є дуже корисним для побудови ієрархічних структур, де ви хочете уникнути дублювання коду. Це дозволяє вам створювати загальний "батьківський" клас, що містить загальну логіку, а потім додавати специфічні "дочірні" класи, які успадковують цю логіку, додаючи до неї свої особливості.

Ключове слово extends використовується у оголошенні класу. Після слова extends слідує назва класу, від якого потрібно успадкувати властивості. Це може бути корисно у великих програмах, структурованих навколо ООП (Об'єктно-Орієнтоване Програмування), а також у бібліотеках і фреймворках.

Приклад:

// Батьківський клас
class Animal {
  constructor(name) {
    this.name = name;
  }
  makeSound() {
    console.log('Some generic sound');
  }
}

// Дочірній клас
class Dog extends Animal {
  makeSound() {
    console.log('Woof');
  }
}

const myDog = new Dog('Buddy');
myDog.makeSound();  // Виводить 'Woof', а не 'Some generic sound'

У цьому прикладі, клас Dog успадковує властивості та методи від класу Animal, але також перевизначає метод makeSound.

Нотатка:	Якщо ви хочете використовувати один і той же метод, але з різною реалізацією в дочірніх класах, ключове слово `extends` дозволяє це зробити ефективно через поліморфізм.
Нотатка:	Дочірній клас може мати методи з тими ж самими назвами, що й у батьківському класі. Це називається перевизначенням методів.
Нотатка:	Ключове слово `super` може використовуватися для виклику відповідних методів батьківського класу.
Нотатка:	Статичні методи і властивості також успадковуються.

Синтаксис

class ChildClass extends ParentClass { /* … */ }

Значення

Return

Переглядачі

Переглядач
	49	45	9	36	13

Переглядач
	49	49	45	9

Переглядач
	6.0.0	1.0

В цьому прикладі ми створюємо два класи: Vehicle (базовий клас) та Car (дочірній клас). Клас Car успадковує властивості та методи від Vehicle. За допомогою ключового слова super ми викликаємо конструктор Vehicle, щоб успадкувати його властивості.

// Базовий клас "Транспортний засіб"
class Vehicle {
    constructor(brand, model) {
        this.brand = brand; 
        this.model = model;
    }
    
    // Функція для виведення інформації
    showInfo() {
        console.log(`Це ${this.brand} моделі ${this.model}`);
    }
}

// Клас "Автомобіль", який успадковує властивості і методи від "Транспортний засіб"
class Car extends Vehicle {
    constructor(brand, model, maxSpeed) {
        super(brand, model); // Виклик конструктора батьківського класу
        this.maxSpeed = maxSpeed;
    }
    
    showMaxSpeed() {
        console.log(`Максимальна швидкість: ${this.maxSpeed} км/год`);
    }
}

const bmw = new Car("BMW", "X5", 240);
bmw.showInfo(); // Виводить: "Це BMW моделі X5"
bmw.showMaxSpeed(); // Виводить: "Максимальна швидкість: 240 км/год"

В цьому прикладі ми створюємо клас User, який має основні властивості користувача: ім'я та вік. Ми також маємо метод displayInfo для відображення цих даних. Клас Student успадковує властивості та методи класу User, але також додає додаткову властивість - курс навчання.

Ми також додаємо новий метод displayStudentInfo, який виводить інформацію як про користувача, так і про студента. Таким чином, за допомогою ключового слова extends, ми можемо розширити можливості базового класу, додаючи нові властивості та методи, а також використовуючи вже існуючі.

// Базовий клас "Користувач"
class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    displayInfo() {
        console.log(`Ім'я: ${this.name}, Вік: ${this.age}`);
    }
}

// Клас "Студент", який успадковує властивості та методи від "Користувач"
class Student extends User {
    constructor(name, age, course) {
        super(name, age); // Виклик конструктора батьківського класу
        this.course = course;
    }
    
    displayStudentInfo() {
        this.displayInfo(); // Використання метода з батьківського класу
        console.log(`Курс: ${this.course}`);
    }
}

const oleksiy = new Student("Олексій", 20, "Математика");
oleksiy.displayStudentInfo(); 
// Виводить: "Ім'я: Олексій, Вік: 20"
// Виводить: "Курс: Математика"

JS довідник

JavaScript

Наповнення JS розділу