javascript - ES6 类多重继承

标签 javascript ecmascript-6

我对此的大部分研究都是在 BabelJS 上完成的。以及 MDN (根本没有任何信息),但如果我没有足够仔细地寻找有关 ES6 规范的更多信息,请随时告诉我。

我想知道 ES6 是否像其他鸭子类型语言一样支持多重继承。例如,我可以这样做:

class Example extends ClassOne, ClassTwo {
    constructor() {
    }
}

将多个类扩展到新类?如果是这样,解释器是否会更喜欢 ClassTwo 中的方法/属性而不是 ClassOne 中的方法/属性?

最佳答案

检查下面的示例,super 方法按预期工作。使用一些技巧,即使 instanceof 也能工作(大多数时候):

// base class
class A {  
  foo() {
    console.log(`from A -> inside instance of A: ${this instanceof A}`);
  }
}

// B mixin, will need a wrapper over it to be used
const B = (B) => class extends B {
  foo() {
    if (super.foo) super.foo(); // mixins don't know who is super, guard against not having the method
    console.log(`from B -> inside instance of B: ${this instanceof B}`);
  }
};

// C mixin, will need a wrapper over it to be used
const C = (C) => class extends C {
  foo() {
    if (super.foo) super.foo(); // mixins don't know who is super, guard against not having the method
    console.log(`from C -> inside instance of C: ${this instanceof C}`);
  }
};

// D class, extends A, B and C, preserving composition and super method
class D extends C(B(A)) {  
  foo() {
    super.foo();
    console.log(`from D -> inside instance of D: ${this instanceof D}`);
  }
}

// E class, extends A and C
class E extends C(A) {
  foo() {
    super.foo();
    console.log(`from E -> inside instance of E: ${this instanceof E}`);
  }
}

// F class, extends B only
class F extends B(Object) {
  foo() {
    super.foo();
    console.log(`from F -> inside instance of F: ${this instanceof F}`);
  }
}

// G class, C wrap to be used with new decorator, pretty format
class G extends C(Object) {}

const inst1 = new D(),
      inst2 = new E(),
      inst3 = new F(),
      inst4 = new G(),
      inst5 = new (B(Object)); // instance only B, ugly format

console.log(`Test D: extends A, B, C -> outside instance of D: ${inst1 instanceof D}`);
inst1.foo();
console.log('-');
console.log(`Test E: extends A, C -> outside instance of E: ${inst2 instanceof E}`);
inst2.foo();
console.log('-');
console.log(`Test F: extends B -> outside instance of F: ${inst3 instanceof F}`);
inst3.foo();
console.log('-');
console.log(`Test G: wraper to use C alone with "new" decorator, pretty format -> outside instance of G: ${inst4 instanceof G}`);
inst4.foo();
console.log('-');
console.log(`Test B alone, ugly format "new (B(Object))" -> outside instance of B: ${inst5 instanceof B}, this one fails`);
inst5.foo();

将打印出来

Test D: extends A, B, C -> outside instance of D: true
from A -> inside instance of A: true
from B -> inside instance of B: true
from C -> inside instance of C: true
from D -> inside instance of D: true
-
Test E: extends A, C -> outside instance of E: true
from A -> inside instance of A: true
from C -> inside instance of C: true
from E -> inside instance of E: true
-
Test F: extends B -> outside instance of F: true
from B -> inside instance of B: true
from F -> inside instance of F: true
-
Test G: wraper to use C alone with "new" decorator, pretty format -> outside instance of G: true
from C -> inside instance of C: true
-
Test B alone, ugly format "new (B(Object))" -> outside instance of B: false, this one fails
from B -> inside instance of B: true

Link to fiddle around

关于javascript - ES6 类多重继承,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48308783/

相关文章:

javascript - ES6 模块导入是否执行导入文件中的代码?

javascript - three.js 的新手,如何在 three.js 中为这个球制作动画

javascript - 如何使用 Angular/ionic 对 json 数据进行分组和求和?

javascript - Phantomjs - 引用错误 : Can't find variable: $

javascript - 扩展 Web API 类构造函数

javascript - 在 mocha-jsdom 中使用 jQuery 时如何修复 "ReferenceError: $ is not defined"?

javascript - Typescript - 如何避免未声明对象的编译错误

javascript - 将 Vue.js 添加到现有的非单页应用程序

javascript - 当鼠标向上或向下操作时,范围 slider 不排序?

javascript - es2015 map 不支持对象数组?