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

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

super - це ключове слово, яке використовується для виклику методів батьківського класу в дочірньому класі. Коли ми розширюємо клас за допомогою наслідування, іноді нам потрібно використовувати або модифікувати поведінку батьківського класу, замість того, щоб писати все заново.

super можна використовувати в будь-якому дочірньому класі, що наслідує інший клас. Воно зазвичай використовується в конструкторі дочірнього класу для виклику конструктора батьківського класу.

Основні особливості та прийоми

Використовуючи super в конструкторі, ви повинні викликати його перед тим, як буде використаний ключове слово this.
Якщо ви не використовуєте super в дочірньому класі, який має конструктор, виникне помилка.

Приклад:

class Person {
    constructor(name) {
        this.name = name;
    }
    
    greet() {
        return `Привіт, мене звати `{this.name}`;
    }
}

class Student extends Person {
    constructor(name, grade) {
        super(name); // викликаємо конструктор батьківського класу
        this.grade = grade;
    }

    greet() {
        return ``{super.greet()} і я студент `{this.grade} курсу`;
    }
}

let student = new Student("Олег", 2);
console.log(student.greet()); // "Привіт, мене звати Олег і я студент 2 курсу"

У цьому прикладі ми створили дочірній клас Student, який наслідує клас Person. За допомогою super ми викликаємо конструктор та метод батьківського класу.

Нотатка:	Пам'ятайте, що `super` вказує на прототип об'єкта, а не на сам об'єкт. Це може призвести до неочікуваної поведінки, якщо прототип було змінено після створення об'єкта.
Нотатка:	`super` також може бути використаний в статичних методах для виклику відповідних статичних методів батьківського класу.
Порада:	Не вважайте, що завжди потрібно використовувати `super` у дочірньому класі. Якщо вам не потрібно спадкувати або змінювати специфічну поведінку батьківського класу, то може бути краще уникати його використання. Це допоможе зробити ваш код чистішим та зрозумілішим.
Нотатка:	При використанні `super` в конструкторі дочірнього класу впевніться, що ви викликаєте його до будь-яких інших викликів `this`. В іншому випадку ви отримаєте помилку. Приклад: `class Parent { constructor() { this.name = "Parent"; } } class Child extends Parent { constructor() { super(); this.age = 10; // Тут ми можемо безпечно використовувати this } }`
Нотатка:	Хоча `super` корисний інструмент, він має свої обмеження. `super` вказує лише на прототип батьківського класу, а не на його екземпляр. Це може призвести до неочікуваної поведінки в певних ситуаціях, особливо якщо ви змінюєте прототип після створення екземпляра класу.

Синтаксис

super([arguments]) // calls the parent constructor.
super.propertyOnParent
super[expression]

Значення

Return

Переглядачі

Переглядач
	42	45	7	29	13

Переглядач
	42	45	42	7

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

В цьому прикладі ми маємо два класи: Animal і Dog. Dog є дочірнім класом для Animal. В конструкторі класу Dog використовується super(name) для виклику конструктора батьківського класу Animal і передачі ім'я тварини. Це необхідно зробити перед тим, як використовувати this, щоб встановити властивості екземпляра.

// Оголошення батьківського класу Animal
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} говорить.`);
  }
}

// Оголошення дочірнього класу Dog
class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Виклик конструктора батьківського класу
    this.breed = breed;
  }

  speak() {
    super.speak(); // Виклик методу speak батьківського класу
    console.log(`${this.name} гавкає.`);
  }
}

// Створення екземпляра дочірнього класу і виведення результату
const myDog = new Dog("Тобі", "Бульдог");
myDog.speak();

У цьому прикладі клас Circle наслідує клас Shape. Метод draw() перевизначений в класі Circle, але в ньому викликається аналогічний метод батьківського класу через super.draw(). Це дозволяє спочатку виконати код батьківського методу, а потім додати до нього функціональність, специфічну для класу Circle.

// Батьківський клас
class Shape {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  draw() {
    console.log(`Малюємо фігуру на координатах (${this.x}, ${this.y})`);
  }
}

// Дочірній клас
class Circle extends Shape {
  constructor(x, y, radius) {
    super(x, y); // Виклик конструктора батьківського класу
    this.radius = radius;
  }

  draw() {
    super.draw(); // Виклик методу draw батьківського класу
    console.log(`З радіусом ${this.radius}`);
  }
}

// Створення екземпляра дочірнього класу і виведення результату
const myCircle = new Circle(5, 5, 10);
myCircle.draw();

JS довідник

JavaScript

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