Как расширить класс без использования super в ES6?

Правила для классов ES2015 (ES6) в основном сводятся к следующему:

1. В конструкторе дочернего класса this нельзя использовать до тех пор, пока не будет вызван super.
2. Конструкторы классов ES6 ДОЛЖНЫ вызывать super, если они являются подклассами, или они должны явно возвращать некоторый объект, чтобы занять место того, который не был инициализирован.

Это сводится к двум важным разделам спецификации ES2015.

Раздел 8.1.1.3.4 определяет логику принятия решения что this находится в функции. Важной частью для классов является то, что this может находиться в состоянии "uninitialized", и в этом состоянии попытка использовать this вызовет исключение.

Раздел 9.2.2, [[Construct]], который определяет поведение функций, вызываемых через new или super. При вызове конструктора базового класса this инициализируется на шаге 8 из [[Construct]], но во всех остальных случаях this не инициализируется. В конце построения вызывается GetThisBinding, поэтому, если super еще не был вызван (таким образом, инициализируется this) или не был возвращен явный объект замены, последняя строка вызова конструктора вызовет исключение.

Было несколько ответов и комментариев о том, что super ДОЛЖНО быть первой строкой внутри constructor. Это просто неправильно. Ответ @loganfsmyth содержит необходимые ссылки на требования, но сводится к следующему:

Конструктор наследования (extends) должен вызывать super перед использованием this и перед возвратом, даже если this не используется

См. фрагмент ниже (работает в Chrome...), чтобы понять, почему может иметь смысл иметь операторы (без использования this) перед вызовом 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());

Новый синтаксис класса es6 — это всего лишь другое обозначение «старых» «классов» es5 с прототипами. Поэтому вы не можете создать конкретный класс без установки его прототипа (базового класса).

Это все равно, что положить сыр на бутерброд, не приготовив его. Также нельзя класть сыр перед приготовлением бутерброда, так что...

... использование ключевого слова this перед вызовом суперкласса с super() также не допускается.

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

Если вы не указываете конструктор для базового класса, используется следующее определение:

constructor() {}

Для производных классов используется следующий конструктор по умолчанию:

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

РЕДАКТИРОВАТЬ: Нашел это на developer.mozilla.org:

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

Источник

Вы можете опустить super() в своем подклассе, если вы вообще опускаете конструктор в своем подклассе. «Скрытый» конструктор по умолчанию будет автоматически включен в ваш подкласс. Однако, если вы включаете конструктор в свой подкласс, 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

Прочтите это для получения дополнительной информации.

Только что зарегистрировался, чтобы опубликовать это решение, так как ответы здесь меня ничуть не удовлетворяют, поскольку на самом деле есть простой способ обойти это. Настройте свой шаблон создания класса, чтобы перезаписать логику в подметоде, используя только суперконструктор, и перенаправить ему аргументы конструктора.

Как и в случае, вы не создаете конструктор в своих подклассах как таковой, а только ссылаетесь на метод, который переопределен в соответствующем подклассе.

Это означает, что вы освобождаетесь от навязываемой вам функциональности конструктора и воздерживаетесь от использования обычного метода, который может быть переопределен и не навязывает super(), когда вы предоставляете себе выбор, если, где и как. вы хотите вызвать супер (полностью необязательно), например:

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

ваше здоровье!

Ответ от justyourimage — самый простой способ, но его пример немного раздут. Вот общая версия:

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

Не расширяйте настоящий constructor(), просто используйте поддельный _constructor() для логики инстанцирования.

Обратите внимание, что это решение делает отладку раздражающей, потому что вам приходится использовать дополнительный метод для каждого экземпляра.

Пытаться:

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

Демо

Я бы рекомендовал использовать OODK-JS, если вы собираетесь разрабатывать следующие концепции ООП.

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

Простое решение: я думаю, что это ясно, нет необходимости в объяснении.

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 упомянул new.target.prototype, но я искал конкретный пример, доказывающий, что вы можете получить доступ к this (или, лучше, к ссылке на объект, который клиентский код создает с помощью new, см. ниже), вообще не вызывая super().

Говорить дешево, покажите мне код... Итак, вот пример:

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)

Что выведет:

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

Таким образом, вы можете видеть, что мы эффективно создаем объект типа B (дочерний класс), который также является объектом типа A (его родительский класс), а внутри childMethod() дочернего B у нас есть this, указывающий на объект obj, который мы создали. в B's constructor с Object.create(new.target.prototype).

И все это совершенно не заботясь о super.

Это использует тот факт, что в JS constructor может возвращать совершенно другой объект, когда клиентский код создает новый экземпляр с new.

Надеюсь, это поможет кому-то.