javascript - ES6 类多重继承

标签 javascript ecmascript-6

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

我想知道 ES6 是否以与其他鸭子类型语言相同的方式支持多重继承。例如,我可以做类似的事情吗:

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

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

最佳答案

检查下面的示例,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/29879267/

相关文章:

javascript - 无法自动刷新内容

javascript - 我应该将数据和方法放在嵌套组件中的哪里?

ruby-on-rails - 如何在 ruby​​ on rails 应用程序中使用 ES6 (ES2015)?

javascript - javascript中的逻辑与两个 bool 数组?

javascript - 如何使用 Ecmascript 6 类扩展对象字面量类

javascript - 如何使用每个函数 jQuery 在其父元素上添加类

javascript - 舍入 n * 10 的算法

javascript - 找不到 Electron 应用程序

javascript - 箭头函数 : how to indicate un-needed parameters in destructuring

reactjs - 如何为 useReducer 键入 state 和 dispatch - typescript 和 react