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 у дочірньому класі. Якщо вам не потрібно спадкувати або змінювати специфічну поведінку батьківського класу, то може бути краще уникати його використання. Це допоможе зробити ваш код чистішим та зрозумілішим.

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

Нотатка

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

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

Нотатка

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

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

Нотатка

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

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

Нотатка

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

Приклад:

class Parent {
   constructor() {
       this.name = "Parent";
   }
}

class Child extends Parent {
   constructor() {
       super(); 
       this.age = 10; // Тут ми можемо безпечно використовувати this
   }
}

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

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

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

Приклади

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

// Оголошення батьківського класу 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(); 

// Батьківський клас
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();