Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить ключове слово super()?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 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;
  }
}
```

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

1. До виклику `super()` об'єкт `this` **ще не існує**.
2. Виклик `super(name)` викликає конструктор батьківського класу (`Animal`)
і створює `this`, який тепер можна використовувати.
3. Після цього ти можеш присвоювати поля в `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` недоступний (помилка) |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати584 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.