JavaScriptObiekty i klasy

super

Odwołuje się do klasy bazowej: wywołuje jej konstruktor albo jej wersję metody.

Na tej stronie

Przykład

#
JavaScript
class Lesson {
  constructor(title) {
    this.title = title
  }

  summary() {
    return `Lekcja: ${this.title}`
  }
}

class VideoLesson extends Lesson {
  constructor(title, minutes) {
    super(title)
    this.minutes = minutes
  }

  summary() {
    return `${super.summary()}, wideo ${this.minutes} min`
  }
}

const lesson = new VideoLesson('Flexbox', 12)
console.log(lesson.summary())
console.log(lesson)
Konsola
Lekcja: Flexbox, wideo 12 min
VideoLesson { title: 'Flexbox', minutes: 12 }

Definicja i zastosowanie

#

Słowo super ma dwa zastosowania. Wywołane jak funkcja, super(...), uruchamia konstruktor klasy bazowej i jest dozwolone tylko w konstruktorze klasy, która używa extends. Użyte z kropką, super.metoda(), wywołuje wersję metody z klasy bazowej, nawet jeśli bieżąca klasa ją nadpisała.

W konstruktorze klasy pochodnej super() musi się wykonać, zanim pierwszy raz użyjesz this, bo dopiero wtedy obiekt istnieje. Argumenty przekazane do super() trafiają do konstruktora rodzica, więc tam zwykle ustawia się pola wspólne dla obu klas.

Wywołanie super.metoda() pozwala rozszerzyć odziedziczone zachowanie zamiast pisać je od nowa: najpierw robisz to, co rodzic, a potem dokładasz swoje. Działa w zwykłych i statycznych metodach klas oraz w metodach literałów obiektów zapisanych skrótem metoda() {}.

Składnia

#
Składnia
super(arg1, arg2)
super.method(args)
super.property

Parametry

#
  • arg1…argN

    opcjonalne

    Argumenty przekazywane do konstruktora klasy bazowej przy wywołaniu super(...).

Więcej przykładów

#
Rozszerzenie metody rodzica
JavaScript
class Inventory {
  constructor() {
    this.items = []
  }

  add(item) {
    this.items.push(item)
    return this.items.length
  }
}

class LimitedInventory extends Inventory {
  add(item) {
    if (this.items.length >= 2) {
      return 'Plecak pełny'
    }
    return super.add(item)
  }
}

const backpack = new LimitedInventory()
console.log(backpack.add('mapa'))
console.log(backpack.add('kompas'))
console.log(backpack.add('lina'))
Konsola
1
2
Plecak pełny

Klasa pochodna dokłada tylko sprawdzenie limitu, a samo dodawanie zostawia metodzie rodzica wywołanej przez super.add().

super w metodzie statycznej
JavaScript
class Account {
  static create(name) {
    return { name, fuel: 10 }
  }
}

class PremiumAccount extends Account {
  static create(name) {
    return { ...super.create(name), fuel: Infinity, premium: true }
  }
}

console.log(Account.create('Ania'))
console.log(PremiumAccount.create('Kuba'))
Konsola
{ name: 'Ania', fuel: 10 }
{ name: 'Kuba', fuel: Infinity, premium: true }
Pułapka: konstruktor bez super()
JavaScript
class User {
  constructor(name) {
    this.name = name
  }
}

class Admin extends User {
  constructor(name) {
    console.log('Tworzę admina')
  }
}

try {
  new Admin('Ola')
} catch (error) {
  console.log(error.name)
}
Konsola
Tworzę admina
ReferenceError

Konstruktor klasy pochodnej, który nie wywoła super(), kończy się błędem w chwili, gdy dobiega końca. Tak samo kończy się każde użycie this przed super().

Obsługa przeglądarek

#

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Jeśli konstruktor klasy pochodnej tylko przekazuje argumenty dalej, nie pisz go wcale. Domyślny konstruktor zrobi to za Ciebie.
  • Nadpisując metodę, sprawdź, czy nie wystarczy wywołać super.metoda() i dopisać tylko różnicę. Unikniesz kopiowania kodu rodzica.
  • super działa tylko w metodach zapisanych skrótem, np. greet() {}. W funkcji przypisanej jako greet: function () {} albo w zwykłej funkcji jego użycie to błąd składni.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.