2

只是（模拟）多重继承是混合的唯一优势：

 Object.assign( MyClassA.prototype, MyMixinB )

与继承

 class MyClass extends MyClassB {

 // MyClassB = class version of MyMixinB

在 ES6 Javascript 中？

谢谢

4

1 回答 1

3

不会有那么一个简短的答案。JavaScript (JS) 为构建类型/对象系统提供了许多不同的技术方法（以及如何组合它们），实用性随之而来。

首先，正如 OP（原始海报）已经意识到的那样，JS 中没有真正/真正的多重继承。这种语言只提供基于原型的单一继承（可以链接），无论是选择类还是传统的纯函数风格。

但是，其次，与其他编程语言 (PL) 一样，还有另一种不基于继承的代码重用和对象组合方式……它是基于 mixin 和/或特征的组合。

但我会坚持使用 OP 提供的示例代码。

Object.assign(MyClassA.prototype, MyMixinB)

这已经是一个不错的选择，如果有人考虑MyMixinB提供额外的行为作为基于对象的 mixin，例如......

var arr = ['object', 'based', 'mixin', 'approach'];
var list = { length: 4, 0: 'the', 1: 'quick', 2: 'brown', 3: 'fox' };

console.log('(typeof arr.last) : ', (typeof arr.last));
console.log('(typeof list.last) : ', (typeof list.last));

const withObjectBasedListLastBehavior = {
  last: function () {
    return this[this.length - 1];
  }
}
Object.assign(Array.prototype, withObjectBasedListLastBehavior);
Object.assign(list, withObjectBasedListLastBehavior);

console.log('(typeof arr.last) : ', (typeof arr.last));
console.log('arr.last() : ', arr.last());

console.log('(typeof list.last) : ', (typeof list.last));
console.log('list.last() : ', list.last());

console.log('(arr.last === list.last) : ', (arr.last === list.last));
console.log('(arr.last === Array.prototype.last) : ', (arr.last === Array.prototype.last));
.as-console-wrapper { max-height: 100%!important; top: 0; }

上述方法是组合和继承的结合。mixin 为类似列表的结构withObjectBasedListLastBehavior提供了一种通用实现的last方法。这种结构本身不会产生任何影响。通过列表行为可以分配给任何类似列表的结构Object.assign。last但是第一个示例的 OP 确实为 a 分配了一个 mixin prototype。因此，除非一个不具有自己last方法的实例将调用它，否则不会使用这种新获得的行为。然后进行原型委托……现在的原型last将在调用对象的上下文中被调用。

通过 mixin（承载这种行为的结构）提供额外的行为/功能的优势在于可以灵活地重复使用这些结构。理想的 mixin 是原子的，并且只具有一种特定的行为（一种方法）。这种行为可以从类构造函数/构造函数的主体中混合，或者与上面的示例一样，它被分配给任何对象（原型对象或任何其他类型）。因此，通过 mixins/traits 在 JavaScript 中的代码重用可能在 2 个级别......在类级别（在构造/实例化时）和在任何时间在对象级别。

这种灵活性应该不足为奇，因为 mixins/traits 仅有助于组合行为的观点（一个对象有一个行为），而真正的继承，也在 JS 中，负责的是事物关系。

应该知道基于 mixin/trait 的组合和继承之间的区别并不是 JavaScript 特有的。这些概念也适用于其他 PL。从技术上讲，JS 更加灵活，因为它是基于对象的，并且具有两种委托方式，通过自动运行的原型委托隐式和通过调用函数的and方法直接传递上下文的显式方式。callapply

上述提供的强烈意见的实际证明考虑到了 OP 的第二个示例代码......

class MyClass extends MyClassB {

// MyClassB = class version of MyMixinB

...并确实将其更改为类似的东西...

const withFunctionBasedListLastBehavior = (function () {
  function last() {   // single implementation
    return this[this.length - 1];
  }
  return function() { // always going to share the above
    this.last = last; // single implementation, thus always
  };                  // featuring one and the same signature.
}());

const withFunctionBasedListFirstBehavior = (function () {
  function first() {
    return this[0];
  }
  return function() {
    this.first = first;
  };
}());

const withFunctionBasedListItemBehavior = (function () {
  function item(idx) {
    return this[idx];
  }
  return function() {
    this.item = item;
  };
}());


class ListWrapper {
  constructor(list) {

    // mixin in / explicit delegation
    withFunctionBasedListFirstBehavior.call(list);
    withFunctionBasedListLastBehavior.call(list);
    withFunctionBasedListItemBehavior.call(list);

    // forwarding
    this.first = function() {
      return list.first();
    };
    this.last = function() {
      return list.last();
    };
    this.item = function(idx) {
      return list.item(idx);
    }
  }
}


class Queue extends ListWrapper { // inheritance part I.
  constructor() {
    const list = [];

    super(list);                  // inheritance part II.

    // queue specific behavior
    this.enqueue = function(value) {
      list.push(value);
      return value;
    };
    this.dequeue = function() {
      return list.shift();
    };
  }
}


var queue = new Queue;

console.log("queue.enqueue('the') : ", queue.enqueue('the'));
console.log("queue.enqueue('quick') : ", queue.enqueue('quick'));
console.log("queue.enqueue('brown') : ", queue.enqueue('brown'));
console.log("queue.enqueue('fox') : ", queue.enqueue('fox'));

console.log("queue.first() : ", queue.first());
console.log("queue.last() : ", queue.last());
console.log("queue.item(2) : ", queue.item(2));

console.log("queue.dequeue() : ", queue.dequeue());
console.log("queue.dequeue() : ", queue.dequeue());
console.log("queue.dequeue() : ", queue.dequeue());

console.log("queue.first() : ", queue.first());
console.log("queue.last() : ", queue.last());
console.log("queue.item(2) : ", queue.item(2));

console.log("queue.dequeue() : ", queue.dequeue());
console.log("queue.dequeue() : ", queue.dequeue());

console.log('(queue instanceof Queue) : ', (queue instanceof Queue));
console.log('(queue instanceof ListWrapper) : ', (queue instanceof ListWrapper));
.as-console-wrapper { max-height: 100%!important; top: 0; }

于 2018-02-10T19:17:16.873 回答