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.

правити

Нотатка

Дочірній клас може мати методи з тими ж самими назвами, що й у батьківському класі. Це називається перевизначенням методів.

автор: Bond правити

Нотатка

Ключове слово super може використовуватися для виклику відповідних методів батьківського класу.

автор: Bond правити

Нотатка

Статичні методи і властивості також успадковуються.

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

class ChildClass extends ParentClass { /* … */ }

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

// Базовий клас "Транспортний засіб"
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 км/год"

// Базовий клас "Користувач"
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"
// Виводить: "Курс: Математика"