Come estendere una classe senza dover usare super in ES6?

È possibile estendere una classe in ES6 senza chiamare il supermetodo per richiamare la classe genitore?

EDIT: la domanda potrebbe essere fuorviante. È lo standard che dobbiamo chiamare super()o mi manca qualcosa?

Per esempio:

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();

Quando non chiamo super()la classe derivata ricevo un problema di ambito ->this is not defined

Lo sto eseguendo con iojs --harmony nella v2.3.0

Le regole per le classi ES2015 (ES6) si riducono sostanzialmente a:

1. In un costruttore di classi figlio, thisnon può essere utilizzato finché non superviene chiamato.
2. I costruttori di classi ES6 DEVONO chiamare superse sono sottoclassi, o devono restituire esplicitamente un oggetto per prendere il posto di quello che non è stato inizializzato.

Ciò si riduce a due importanti sezioni delle specifiche ES2015.

La sezione 8.1.1.3.4 definisce la logica per decidere cosa thisc'è nella funzione. La parte importante per le classi è che è possibile thistrovarsi in uno "uninitialized"stato, e quando in questo stato, il tentativo di utilizzare thisgenererà un'eccezione.

Sezione 9.2.2 , [[Construct]]che definisce il comportamento delle funzioni chiamate tramite newo super. Quando si chiama un costruttore di una classe base, thisviene inizializzato al passaggio 8 di [[Construct]], ma per tutti gli altri casi thisnon è inizializzato. Alla fine della costruzione, GetThisBindingviene chiamato, quindi se supernon è stato ancora chiamato (quindi inizializzazione this), o non è stato restituito un oggetto sostitutivo esplicito, la riga finale della chiamata al costruttore genererà un'eccezione.

Ci sono state più risposte e commenti che affermano che super DEVE essere la prima riga all'interno constructor. Questo è semplicemente sbagliato. La risposta di @loganfsmyth contiene i riferimenti richiesti dei requisiti, ma si riduce a:

Il extendscostruttore Inheriting ( ) deve chiamare superprima di utilizzare thise prima di restituire anche se thisnon viene utilizzato

Vedere il frammento di seguito (funziona in Chrome ...) per vedere perché potrebbe avere senso avere istruzioni (senza utilizzare this) prima di chiamare 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());

La nuova sintassi della classe es6 è solo un'altra notazione per le "vecchie" classi "es5" con prototipi. Pertanto non è possibile creare un'istanza di una classe specifica senza impostarne il prototipo (la classe base).

È come mettere il formaggio sul tuo panino senza farlo. Inoltre non puoi mettere il formaggio prima di fare il panino, quindi ...

... anche l'uso della thisparola chiave prima di chiamare la super classe con super()non è consentito.

// 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";
    }
}

Se non specifichi un costruttore per una classe base, viene utilizzata la seguente definizione:

constructor() {}

Per le classi derivate, viene utilizzato il seguente costruttore predefinito:

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

EDIT: Trovato su developer.mozilla.org:

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

fonte

Mi sono appena registrato per pubblicare questa soluzione poiché le risposte qui non mi soddisfano minimamente poiché in realtà c'è un modo semplice per aggirare questo. Regola il tuo modello di creazione della classe per sovrascrivere la logica in un sotto-metodo usando solo il super costruttore e inoltrare gli argomenti del costruttore ad esso.

Come in voi non create un costruttore nelle vostre sottoclassi di per sé, ma fate riferimento solo a un metodo che viene sovrascritto nella rispettiva sottoclasse.

Ciò significa che ti liberi dalla funzionalità del costruttore imposta su di te e ti astieni a un metodo regolare - che può essere ignorato e non impone super () su di te lasciandoti la scelta se, dove e come vuoi chiamare super (completamente opzionale) ad esempio:

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");

Saluti!

Puoi omettere super () nella tua sottoclasse, se ometti del tutto il costruttore nella tua sottoclasse. Un costruttore predefinito "nascosto" verrà incluso automaticamente nella tua sottoclasse. Tuttavia, se includi il costruttore nella tua sottoclasse, super () deve essere chiamato in quel costruttore.

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

Leggi questo per maggiori informazioni.

La risposta di justyourimage è il modo più semplice, ma il suo esempio è un po 'gonfio. Ecco la versione generica:

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();
    }
}

Non estendere il reale constructor(), usa solo il falso _constructor()per la logica di istanziazione.

Nota, questa soluzione rende fastidioso il debug perché devi passare a un metodo aggiuntivo per ogni istanza.

Provare:

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

Consiglierei di utilizzare OODK-JS se intendi sviluppare i seguenti concetti 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);
});

Soluzione semplice: penso che sia chiaro che non c'è bisogno di spiegazioni.

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 ha menzionato new.target.prototype, ma stavo cercando un esempio concreto che dimostri che puoi accedere this(o meglio, il riferimento all'oggetto con cui sta creando il codice client new, vedi sotto) senza dover chiamare super().

Parlare costa poco, mostrami il codice ... Quindi ecco un esempio:

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)

Che produrrà:

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

Quindi puoi vedere che stiamo effettivamente creando un oggetto di tipo B(la classe figlia) che è anche un oggetto di tipo A(la sua classe genitore) e all'interno childMethod()di figlio Babbiamo thispuntato all'oggetto objche abbiamo creato in B constructorcon Object.create(new.target.prototype).

E tutto questo senza preoccuparsene superaffatto.

Ciò sfrutta il fatto che in JS a constructorpuò restituire un oggetto completamente diverso quando il codice client costruisce una nuova istanza con new.

Spero che questo aiuti qualcuno.