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

Question

我试图通过查看其 flux chat example 的源代码来了解 Facebook Flux 的工作原理。

在那里，我看到了this code:

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;

...其中分配只是 ES6 规范中的 polyfill Object.assign。

嗯。这段使用类并改为扩展的代码是否有效？意思是一样的吗？这种方法有什么区别和advantages/disadvantages？

class MessageStore extends EventEmitter {
    emitChange() {
        this.emit(CHANGE_EVENT);
    }

    addChangeListener(callback) {
        this.on(CHANGE_EVENT, callback);
    }

    ...
}

module.exports = new MessageStore();

我问，因为来自其他语言，我直观地理解class/extends，而基于原型的继承对我来说总是有点不清楚。

Answer 1

以下是您可以根据 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 商店示例，请随时查看 stores code in my Babel React Starter App

这也是对 ES6 classes 的有用参考，直观地解释了 class 定义的主体内部发生的事情。

Answer 2

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

Object.assign: 使用 Object.assign 你是 "mixin" 目标对象的新功能，例如Store 可能会混入 EventEmitter。在 Java 中，您将使用 Store implements EventEmitter，这更容易自我解释。

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

What are the differences between using Object.assign and class/extends?

javascript

flux

ecmascript-6