如何在 ES6 中无需使用 super 来扩展类？

Question

是否可以在不调用super方法调用父类的情况下扩展ES6中的类？

编辑：这个问题可能具有误导性。这是我们必须调用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 运行它

Answer 1

ES2015（ES6）类的规则基本上归结为：

1. 在子类构造函数中，在调用super 之前，不能使用this。
2. 如果是子类，ES6 类的构造函数必须调用 super，否则它们必须显式返回某个对象来代替未初始化的对象。

这归结为 ES2015 规范的两个重要部分。

8.1.1.3.4 部分定义了决定this 在函数中的内容的逻辑。类的重要部分是this 可能处于"uninitialized" 状态，当处于这种状态时，尝试使用this 将引发异常。

9.2.2、[[Construct]] 部分定义了通过new 或super 调用的函数的行为。调用基类构造函数时，this 在[[Construct]] 的第 8 步初始化，但对于所有其他情况，this 未初始化。构造结束时调用了GetThisBinding，所以如果super还没有被调用（从而初始化this），或者没有返回显式替换对象，构造函数调用的最后一行将抛出异常.

Answer 2

新的 es6 类语法只是带有原型的“旧”es5“类”的另一种表示法。因此，您不能在不设置其原型（基类）的情况下实例化特定类。

这就像把奶酪放在三明治上而不做。另外你不能在制作三明治之前放奶酪，所以...

...在使用super() 调用超类之前使用this 关键字也是不允许的。

// 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.

Source

Answer 3

有多个答案和 cmets 声明 super 必须是 constructor 中的第一行。那是完全错误的。 @loganfsmyth 答案具有要求的必要参考，但归结为：

继承 (extends) 构造函数必须在使用 this 之前和返回之前调用 super，即使不使用 this 也是如此

请参阅下面的片段（适用于 Chrome...），了解为什么在调用 super 之前有语句（不使用 this）可能有意义。

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

Answer 4

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

阅读this了解更多信息。

Answer 5

刚刚注册发布此解决方案，因为这里的答案至少不能让我满意，因为实际上有一个简单的方法可以解决这个问题。 调整您的类创建模式以覆盖子方法中的逻辑，同时仅使用超级构造函数并将构造函数参数转发给它。

因为您本身并没有在子类中创建构造函数，而是仅引用在相应子类中被覆盖的方法。

这意味着您将自己从强加给您的构造函数功能中解脱出来，并避免使用常规方法 - 如果您让自己选择，则可以覆盖并且不会强制执行 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");

干杯！

Answer 6

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() 进行实例化逻辑。

请注意，此解决方案使调试变得烦人，因为您必须为每个实例化单步执行一个额外的方法。

Answer 7

试试：

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

Answer 8

如果您打算开发以下 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);
});

Answer 9

简单的解决方案：我认为它显然不需要解释。

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

Answer 10

@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 类型的对象（它的父类）并且在子B 的childMethod() 内我们有this 指向我们在B 的constructor 和Object.create(new.target.prototype) 中创建的对象obj。

而这一切完全不关心super。

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

希望这对某人有所帮助。