Що робить ключове слово super()?

JavaScriptJunior~1 хв читання

1. `super()` у конструкторі: виклик батьківського класу

Коли один клас успадковує інший:

javascript

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // викликає Animal.constructor(name)
    this.breed = breed;
  }
}

Що відбувається під капотом:

До виклику super() об'єкт this ще не існує.
Виклик super(name) викликає конструктор батьківського класу (Animal) і створює this, який тепер можна використовувати.
Після цього ти можеш присвоювати поля в this.

javascript

const dog = new Dog("Rex", "Shepherd");
console.log(dog.name);  // "Rex"
console.log(dog.breed); // "Shepherd"

Важливо: `super()` обов'язково викликати до `this`

Якщо ти намагаєшся використати this до виклику super(), JS видасть помилку:

javascript

class Dog extends Animal {
  constructor(name) {
    this.name = name; // ReferenceError
    super(name);
  }
}

Помилка:

ReferenceError: Must call super constructor before accessing 'this'

Чому? Тому що super() створює контекст екземпляра (ініціалізує this). Без нього this просто ще не існує.

2. `super` поза конструктором: доступ до методів батьківського класу

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

javascript

class Animal {
  speak() {
    console.log("The animal makes a sound");
  }
}

class Dog extends Animal {
  speak() {
    super.speak(); // викликає метод батьківського класу
    console.log("The dog barks");
  }
}

new Dog().speak();
// "The animal makes a sound"
// "The dog barks"

super.speak(), це буквально виклик Animal.prototype.speak.call(this).

3. `super` у статичних методах

Якщо в класу є статичні методи, super можна використовувати і в них, щоб звертатися до статики батьківського класу:

javascript

class Parent {
  static sayHi() {
    console.log("Hi from the parent");
  }
}

class Child extends Parent {
  static sayHi() {
    super.sayHi(); // викликає Parent.sayHi()
    console.log("Hi from the child");
  }
}

Child.sayHi();
// Hi from the parent
// Hi from the child

4. Що саме робить `super` під капотом

Під капотом super, це посилання на батьківський прототип:

У звичайних методах → super вказує на Parent.prototype
У статичних методах → super вказує на сам Parent

Тому виклик:

javascript

super.method()

еквівалентний:

javascript

Parent.prototype.method.call(this)

5. Приклад: використання `super` у ланцюжку успадкування

javascript

class Animal {
  constructor(name) {
    this.name = name;
  }
  info() {
    return `Ім'я: ${this.name}`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // викликає Animal.constructor()
    this.breed = breed;
  }
  info() {
    return `${super.info()}, Порода: ${this.breed}`;
  }
}

const dog = new Dog("Rex", "Beagle");
console.log(dog.info()); // Ім'я: Rex, Порода: Beagle

6. `super` і стрілкові функції

Стрілкові функції не мають власного super. Вони беруть його із зовнішнього контексту:

javascript

class A {
  hello() {
    console.log("Hi from A");
  }
}

class B extends A {
  hello = () => {
    super.hello(); // працює, бо бере super із класу
  };
}

new B().hello(); // "Hi from A"

Але важливо пам'ятати, що стрілкові методи створюються на екземплярі, а не в прототипі (див. попереднє пояснення).

7. Помилки при неправильному використанні

Виклик super() у класі без extends:

javascript

class A {
  constructor() {
    super(); // SyntaxError
  }
}

super() можна використовувати лише всередині класу, що успадковує інший.

Підсумок

Де використовується	Що робить
У конструкторі	Викликає конструктор батьківського класу і створює `this`
У методі	Дозволяє викликати батьківський метод (`super.method()`)
У статичному методі	Звертається до статичних методів батьківського класу
Без `extends`	Помилка
До виклику `super()`	`this` недоступний (помилка)

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.