javascript - 使用 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;

...其中 allocate 只是 ES6 规范中的 Polyfilled Object.assign。

嗯。这段代码使用类和扩展代替可以工作吗？意思是一样的吗？这种方法有什么区别和优点/缺点？

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

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

    ...
}

module.exports = new MessageStore();

我问这个问题是因为，来自其他语言，我直观地理解类/扩展，而基于原型(prototype)的继承对我来说总是有点不清楚。

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”始终绑定(bind)到封闭的对象上下文。

有关完整运行的 ES6 商店示例，请随时查看 stores code in my Babel React Starter App

这也是 ES6 classes 的有用引用。它直观地解释了类定义体内发生的事情。