Question

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

在那里，我看到this code：

    public $jsOptions = [
       ['condition' => 'IE 9']
    ];

...其中assign只是从ES6规范中填充的Object.assign。

嗯。这个代码，使用类和扩展，是否有效？它意味着同样的事情吗？这种方法的不同之处和优点/缺点是什么？

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;

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

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函数文字语法，因为它确保＆＃34;这个＆＃34;始终绑定到封闭对象上下文。

对于完全正常工作的ES6商店示例，请随时查看stores code in my Babel React Starter App

这也是ES6 classes的有用参考，可以直观地解释类定义正文中发生的事情。

Answer 2

课程扩展：* 您正在扩展泛型类，有时这正是您想要的，例如button扩展了domElement，但是button不应扩展EventEmitter，因为它们没有共同之处。

Object.assign： 使用Object.assign，您可以将新功能“混合”到目标对象中，例如Store可以混入EventEmitter。在Java中，您将使用Store implements EventEmitter，这更能说明问题。

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

2 个答案: