如何在ES6中不必使用super来扩展类？

是否可以在ES6中扩展类而无需调用super方法来调用父类？

编辑：这个问题可能会引起误解。这是我们必须打电话的标准，super()还是我遗漏了一些东西？

例如：

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

当我不调用super()派生类时，我遇到了范围问题->this is not defined

我正在v2.3.0中使用iojs --harmony运行它

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答案具有要求的必需参考，但可以归结为：

即使未使用Inheriting（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（）。可选），例如：

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

干杯！

如果在子类中完全省略了构造函数，则可以在子类中省略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

阅读此以获得更多信息。

justyourimage的答案是最简单的方法，但是他的例子有点is肿。这是通用版本：

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

不要扩展real constructor()，只需将false _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();

Demo

如果您打算开发以下OOP概念，我建议使用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的constructorwith中创建的对象Object.create(new.target.prototype)。

而这一切都根本不在乎super。

这利用了以下事实：constructor当客户端代码使用构造一个新实例时，在JS中a 可以返回完全不同的对象new。

希望这对某人有帮助。