super

To tłumaczenie jest niepełne. Pomóż przetłumaczyć ten artykuł z języka angielskiego

Słowo kluczowe super jest wykorzystywane do udostępniania i korzystania z funkcji klasy po której nasz obiekt dziedziczy.

Wyrażenia super.prop i super[expr] są poprawne w każdej definicji metody zarówno w klasach i literałach obiektowych.

Składnia

super([arguments]); // wywołuje konstruktor klasy rodzica
super.functionOnParent([arguments]);

Opis

W przypadku użycia w konstruktorze, słowo kluczowe super pojawia się samodzielnie i musi zostać użyte przed użyciem słowa kluczowego this . Słowo kluczowe super  można również wykorzystać do wywoływania funkcji które nasz obiekt odziedziczył po swoim rodzicu.

Przykład

Użycie super w klasach

Poniższy snippet został pobrany z próbki klasy (live demo). W tym przykładzie, super() jest wywoływane w celu uniknięcia powielania tych części konstruktora, które są wspólne zarówno dla Rectangle (trójkąta) jak i Square (kwadratu).

class Rectangle {
  constructor(height, width) {
    this.name = 'Rectangle';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
  get area() {
    return this.height * this.width;
  }
  set area(value) {
    this._area = value;
  }
}

class Square extends Rectangle {
  constructor(length) {
    this.height; // ReferenceError, super needs to be called first!

    // Here, it calls the parent class's constructor with lengths
    // provided for the Rectangle's width and height
    super(length, length);

    // Note: In derived classes, super() must be called before you
    // can use 'this'. Leaving this out will cause a reference error.
    this.name = 'Square';
  }
}

Super-wywołanie metod statycznych

Za pomocą super jesteś w stanie także wywołać metody statyczne.

class Rectangle {
  constructor() {}
  static logNbSides() {
    return 'I have 4 sides';
  }
}

class Square extends Rectangle {
  constructor() {}
  static logDescription() {
    return super.logNbSides() + ' which are all equal';
  }
}
Square.logDescription(); // 'I have 4 sides which are all equal'

Usuwanie właściwości z super wyrzuci błąd

Nie możesz użyć operatora usuwania oraz super.prop bądź super[expr] w celu usunięcia właściwości klasy rodzica ponieważ zostanie zwrócony błąd ReferenceError.

class Base {
  constructor() {}
  foo() {}
}
class Derived extends Base {
  constructor() {}
  delete() {
    delete super.foo; // to jest niepoprawnie
  }
}

new Derived().delete(); // ReferenceError: invalid delete involving 'super'. 

super.prop nie może nadpisać właściwości typu non-writable 

Definiując właściwości non-writable (niezapisywalne) np. Object.defineProperty, pamiętaj, że super nie może nadpisać takiej wartości.

class X {
  constructor() {
    Object.defineProperty(this, 'prop', {
      configurable: true,
      writable: false, 
      value: 1
    });
  }
}

class Y extends X {
  constructor() {
    super();
  }
  foo() {
    super.prop = 2;   // Nie można nadpisać wartości
  }
}

var y = new Y();
y.foo(); // TypeError: "prop" is read-only
console.log(y.prop); // 1

Używanie super.prop w literałach obiektowych

super może być także wykorzystane inicjalizatorze / literale obiektu.

W tym przykładzie dwa obiekty definiują swoją metodę. W drugim obiekcie, super wywołuje metodę obiektu pierwszego. To działa dzięki Object.setPrototypeOf() z czym jesteśmy w stanie ustawić prototyp obiektu obj2 na obj1, tak aby super było w stanie znaleźć metodę method1 w obiekcie obj1.

var obj1 = {
  method1() {
    console.log('method 1');
  }
}

var obj2 = {
  method2() {
    super.method1();
  }
}

Object.setPrototypeOf(obj2, obj1);
obj2.method2(); // wypisze "method 1"

Specyfikacje

Specyfikacja
ECMAScript (ECMA-262)
The definition of 'super' in that specification.

Browser compatibility

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
superChrome Full support 42Edge Full support 13Firefox Full support 45IE No support NoOpera Full support 29Safari Full support 7WebView Android Full support 42Chrome Android Full support 42Firefox Android Full support 45Opera Android Full support 29Safari iOS Full support 7Samsung Internet Android Full support 4.0nodejs Full support 6.0.0

Legend

Full support  
Full support
No support  
No support

See also