Jak rozszerzyć klasę bez konieczności używania super w ES6?

Czy można rozszerzyć klasę w ES6 bez wywoływania supermetody wywołującej klasę nadrzędną?

EDYCJA: Pytanie może być mylące. Czy to standard, do którego musimy zadzwonić, super()czy czegoś mi brakuje?

Na przykład:

class Character {
   constructor(){
      console.log('invoke character');
   }
}

class Hero extends Character{
  constructor(){
      super(); // exception thrown here when not called
      console.log('invoke hero');
  }
}

var hero = new Hero();

Kiedy nie wywołuję super()klasy pochodnej, pojawia się problem z zakresem ->this is not defined

Używam tego z iojs --harmony w wersji 2.3.0

Zasady dla klas ES2015 (ES6) sprowadzają się zasadniczo do:

1. W konstruktorze klasy podrzędnej thisnie można jej używać, dopóki nie superzostanie wywołana.
2. Konstruktory klas ES6 MUSZĄ wywołać, superjeśli są podklasami, lub muszą jawnie zwrócić jakiś obiekt, aby zastąpić ten, który nie został zainicjowany.

Sprowadza się to do dwóch ważnych sekcji specyfikacji ES2015.

Sekcja 8.1.1.3.4 definiuje logikę decydującą o zawartości thisfunkcji. Ważną częścią klas jest to, że można thisbyć w "uninitialized"stanie, a gdy jest w tym stanie, próba użycia thisspowoduje zgłoszenie wyjątku.

Sekcja 9.2.2 , [[Construct]]w której zdefiniowano zachowanie funkcji wywoływanych przeznew lub super. Podczas wywoływania konstruktora klasy bazowej thisjest inicjowany w kroku # 8 programu [[Construct]], ale we wszystkich innych przypadkach thisjest niezainicjalizowany. Na końcu konstrukcji GetThisBindingjest wywoływana, więc jeśli supernie została jeszcze wywołana (a tym samym inicjalizacja this) lub nie został zwrócony jawny obiekt zastępczy, ostatnia linia wywołania konstruktora zgłosi wyjątek.

Było wiele odpowiedzi i komentarzy stwierdzających, że super MUSI to być pierwszy wiersz w środku constructor. To jest po prostu złe. @loganfsmyth answer zawiera wymagane odniesienia do wymagań, ale sprowadza się to do:

extendsKonstruktor Inheriting ( ) musi wywołać superprzed użyciem thisi przed zwróceniem, nawet jeśli thisnie jest używany

Zobacz fragment poniżej (działa w Chrome ...), aby zobaczyć, dlaczego może mieć sens posiadanie instrukcji (bez użycia this) przed wywołaniem super.

'use strict';
var id = 1;
function idgen() {
  return 'ID:' + id++;
}

class Base {
  constructor(id) {
    this.id = id;
  }

  toString() { return JSON.stringify(this); }
}

class Derived1 extends Base {
  constructor() {
    var anID = idgen() + ':Derived1';
    super(anID);
    this.derivedProp = this.baseProp * 2;
  }
}

alert(new Derived1());

Nowa składnia klasy es6 jest tylko inną notacją dla "starych" klas "es5" z prototypami. Dlatego nie można utworzyć wystąpienia określonej klasy bez ustawienia jej prototypu (klasy bazowej).

To jak umieszczanie sera na kanapce bez jej przyrządzania. Nie możesz też ułożyć sera przed zrobieniem kanapki, więc ...

... użycie thissłowa kluczowego przed wywołaniem superklasy with też super()jest niedozwolone.

// valid: Add cheese after making the sandwich
class CheeseSandwich extend Sandwich {
    constructor() {
        super();
        this.supplement = "Cheese";
    }
}

// invalid: Add cheese before making sandwich
class CheeseSandwich extend Sandwich {
    constructor() {
        this.supplement = "Cheese";
        super();
    }
}

// invalid: Add cheese without making sandwich
class CheeseSandwich extend Sandwich {
    constructor() {
        this.supplement = "Cheese";
    }
}

Jeśli nie określisz konstruktora dla klasy bazowej, używana jest następująca definicja:

constructor() {}

W przypadku klas pochodnych używany jest następujący konstruktor domyślny:

constructor(...args) {
    super(...args);
}

EDYCJA: Znaleziono to w developer.mozilla.org:

When used in a constructor, the super keyword appears alone and must be used before the this keyword can be used.

Źródło

Właśnie zarejestrowałem się, aby opublikować to rozwiązanie, ponieważ odpowiedzi tutaj nie satysfakcjonują mnie najmniej, ponieważ w rzeczywistości istnieje prosty sposób obejścia tego. Dostosuj wzorzec tworzenia klas, aby nadpisać logikę w metodzie podrzędnej, używając tylko konstruktora super, i przekaż argumenty konstruktorów do niego.

Tak jak w przypadku, nie tworzysz konstruktora w swoich podklasach jako takich, a jedynie odniesienie do metody, która jest nadpisana w odpowiedniej podklasie.

Oznacza to, że uwalniasz się od funkcji konstruktora narzuconej tobie i powstrzymujesz się od zwykłej metody - która może być nadpisana i nie wymusza super (), gdy pozwalasz sobie na wybór, czy, gdzie i jak chcesz wywołać super (w pełni opcjonalnie) np:

super.ObjectConstructor(...)

class Observable {
  constructor() {
    return this.ObjectConstructor(arguments);
  }

  ObjectConstructor(defaultValue, options) {
    this.obj = { type: "Observable" };
    console.log("Observable ObjectConstructor called with arguments: ", arguments);
    console.log("obj is:", this.obj);
    return this.obj;
  }
}

class ArrayObservable extends Observable {
  ObjectConstructor(defaultValue, options, someMoreOptions) {
    this.obj = { type: "ArrayObservable" };
    console.log("ArrayObservable ObjectConstructor called with arguments: ", arguments);
    console.log("obj is:", this.obj);
    return this.obj;
  }
}

class DomainObservable extends ArrayObservable {
  ObjectConstructor(defaultValue, domainName, options, dependent1, dependent2) {
    this.obj = super.ObjectConstructor(defaultValue, options);
    console.log("DomainObservable ObjectConstructor called with arguments: ", arguments);
    console.log("obj is:", this.obj);
    return this.obj;
  }
}

var myBasicObservable = new Observable("Basic Value", "Basic Options");
var myArrayObservable = new ArrayObservable("Array Value", "Array Options", "Some More Array Options");
var myDomainObservable = new DomainObservable("Domain Value", "Domain Name", "Domain Options", "Dependency A", "Depenency B");

Twoje zdrowie!

Możesz pominąć super () w swojej podklasie, jeśli całkowicie pominiesz konstruktora w swojej podklasie. „Ukryty” domyślny konstruktor zostanie automatycznie dołączony do Twojej podklasy. Jeśli jednak włączysz konstruktor do swojej podklasy, w tym konstruktorze musi zostać wywołana funkcja super ().

class A{
   constructor(){
      this.name = 'hello';   
   }
}
class B extends A{
   constructor(){
      // console.log(this.name); // ReferenceError
      super();
      console.log(this.name);
   }
}
class C extends B{}  // see? no super(). no constructor()

var x = new B; // hello
var y = new C; // hello

Przeczytaj to, aby uzyskać więcej informacji.

Odpowiedź justyourimage jest najłatwiejsza, ale jego przykład jest trochę nadęty. Oto wersja ogólna:

class Base {
    constructor(){
        return this._constructor(...arguments);
    }

    _constructor(){
        // just use this as the constructor, no super() restrictions
    }
}

class Ext extends Base {
    _constructor(){ // _constructor is automatically called, like the real constructor
        this.is = "easy"; // no need to call super();
    }
}

Nie rozszerzaj rzeczywistości constructor(), po prostu użyj fałszywej _constructor()logiki tworzenia instancji.

Zwróć uwagę, że to rozwiązanie sprawia, że ​​debugowanie jest denerwujące, ponieważ musisz przejść do dodatkowej metody dla każdej instancji.

Próbować:

class Character {
   constructor(){
     if(Object.getPrototypeOf(this) === Character.prototype){
       console.log('invoke character');
     }
   }
}


class Hero extends Character{
  constructor(){
      super(); // throws exception when not called
      console.log('invoke hero');
  }
}
var hero = new Hero();

console.log('now let\'s invoke Character');
var char = new Character();

Demo

Polecam użycie OODK-JS, jeśli zamierzasz rozwijać następujące koncepcje OOP.

OODK(function($, _){

var Character  = $.class(function ($, µ, _){

   $.public(function __initialize(){
      $.log('invoke character');
   });
});

var Hero = $.extends(Character).class(function ($, µ, _){

  $.public(function __initialize(){
      $.super.__initialize();
      $.log('invoke hero');
  });
});

var hero = $.new(Hero);
});

Proste rozwiązanie: myślę, że nie ma potrzeby wyjaśniania.

class ParentClass() {
    constructor(skipConstructor = false) { // default value is false
        if(skipConstructor) return;
        // code here only gets executed when 'super()' is called with false
    }
}
class SubClass extends ParentClass {
    constructor() {
        super(true) // true for skipping ParentClass's constructor.
        // code
    }
}

@Bergi wspomniałem new.target.prototype, ale szukałem konkretnego przykładu udowadniającego, że możesz uzyskać dostęp this(lub lepiej, odwołanie do obiektu, za pomocą którego tworzy kod klienta new, patrz poniżej) bez konieczności wywoływania super().

Rozmowa jest tania, pokaż mi kod ... Oto przykład:

class A { // Parent
    constructor() {
        this.a = 123;
    }

    parentMethod() {
        console.log("parentMethod()");
    }
}

class B extends A { // Child
    constructor() {
        var obj = Object.create(new.target.prototype)
        // You can interact with obj, which is effectively your `this` here, before returning
        // it to the caller.
        return obj;
    }

    childMethod(obj) {
        console.log('childMethod()');
        console.log('this === obj ?', this === obj)
        console.log('obj instanceof A ?', obj instanceof A);
        console.log('obj instanceof B ?',  obj instanceof B);
    }
}

b = new B()
b.parentMethod()
b.childMethod(b)

Który wyświetli:

parentMethod()
childMethod()
this === obj ? true
obj instanceof A ? true
obj instanceof B ? true

Więc widać, że są skutecznie tworząc obiekt typu B(klasy dziecko), która jest również obiektem typu A(swojej klasie dominującej) oraz w ramach childMethod()dziecka Bmamy thisskierowaną do obiektu obj, który stworzyliśmy w B constructorz Object.create(new.target.prototype).

A wszystko to bez żadnej troski super.

Wykorzystuje to fakt, że w JS a constructormoże zwrócić zupełnie inny obiekt, gdy kod klienta konstruuje nową instancję z new.

Mam nadzieję, że to komuś pomoże.