使用Object.assign和class/extends有什么区别

Question

我试图通过查看他们的流量聊天示例的源代码来了解Facebook Flux是如何工作的。

在那里，我看到了这个代码：

var MessageStore = assign({}, EventEmitter.prototype, {
  emitChange: function() {
    this.emit(CHANGE_EVENT);
  },
  /**
   * @param {function} callback
   */
  addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
  },
  ...
}
...
module.exports = MessageStore;

其中assign只是填充了polyfilled的对象。根据ES6规范进行assign

嗯。这段代码使用类和扩展是否有效？这意味着同样的事情吗？这种方法的区别和优点/缺点是什么？

class MessageStore extends EventEmitter {
    emitChange() {
        this.emit(CHANGE_EVENT);
    }
    addChangeListener(callback) {
        this.on(CHANGE_EVENT, callback);
    }
    ...
}
module.exports = new MessageStore();

我之所以这么问，是因为我来自其他语言，直观地理解类/扩展，而基于原型的继承对我来说总是有点不清楚

以下是可用于ES6语法和您的情况的工作代码：

import EventEmitter from 'events';
const CHANGE_EVENT = 'change';
class MessageStore extends EventEmitter {
  constructor() {
    super();
  }
  addChangeListener = (callback) => {
    this.on(CHANGE_EVENT, callback);
  }
  removeChangeListener = (callback) => {
    this.removeListener(CHANGE_EVENT, callback);
  }
  emitChange = () => {
    this.emit(CHANGE_EVENT);
  }
}

注意，我更喜欢ES6函数的字面语法，因为它确保"this"始终绑定到封闭对象上下文。

对于一个完全工作的ES6商店示例，请随时查看我的Babel React Starter应用程序中的商店代码

这也是ES6类的一个有用参考，它直观地解释了类定义主体内部的情况。

类扩展：*您正在扩展一个泛型类，这有时正是您想要的，例如button扩展了domElement，但button不应该扩展EventEmitter，因为它们没有任何共同点。

对象.分配：使用Object.assign，您可以将新功能"混合"到目标对象中，例如Store可以混合EventEmitter。在Java中，您可以使用Store implements EventEmitter，它更能自我解释。