Question

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

 Object.assign( MyClassA.prototype, MyMixinB )

与继承

 class MyClass extends MyClassB {

 // MyClassB = class version of MyMixinB

在ES6 Javascript中？

由于

Answer 1

没有一个简短的回答。实用性来自JavaScript（JS）为构建类型/对象系统提供的许多不同的技术方法（以及如何将它们组合起来）。

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

但是，其次，和其他编程语言（PL）一样，还有另一种不基于继承的代码重用和对象组合方式......它是基于mixin和/或trait的组合。

但我会坚持使用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; }

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

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

这种灵活性应该不会令人感到意外，因为mixins / traits仅仅是行为观点（对象 具有行为），而真正的继承，也是JS，负责 是事物的关系。

应该意识到，基于mixin / trait的组合和继承之间的差异不是JavaScript特定的东西。这些概念也适用于其他PL。技术上JS更灵活，因为它是基于对象的，并且具有两种授权方式，隐式通过自动运行的原型委派和显式直接通过调用传递上下文call和apply函数方法。

上述实践证明提供了强烈的意见，考虑到了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; }

在Javascript中Mixins和继承之间有什么实际区别？

1 个答案: