React中EventEmitter问题：this.on不是函数，事件监听方法失效

看起来你是在给自定义的store或者类添加事件监听功能时踩坑了——报错提示this.on is not a function，本质是EventEmitter的方法没正确挂载到你的实例上。下面一步步帮你排查修复：

1. 先搞懂问题根源 #

你用object-assign尝试把EventEmitter的功能混到自己的对象里，但on、removeListener这些方法是存在于EventEmitter的原型链上的，不是实例自身的可枚举属性，object-assign只会复制对象自身的属性，所以自然拿不到这些方法。

2. 两种正确的实现方式 #

方式一：让类直接继承EventEmitter（最推荐） #

这种方式最简洁，能完整继承EventEmitter的所有方法：

import { EventEmitter } from 'events';

// 让你的store类继承EventEmitter
class YourStore extends EventEmitter {
  constructor() {
    super(); // 必须调用父类构造函数，初始化EventEmitter的内部状态
  }

  addChangeListener(callback) {
    this.on('change', callback); // 现在this就有on方法了
  }

  removeChangeListener(callback) {
    this.removeListener('change', callback);
  }

  // 别忘了加触发事件的方法，更新数据后调用它通知组件
  emitChange() {
    this.emit('change');
  }
}

// 导出单例实例，组件里直接用这个实例
export default new YourStore();

方式二：内部实例化EventEmitter（不想继承时用） #

如果因为某些原因不能让类继承EventEmitter，可以把EventEmitter作为内部属性来用：

import { EventEmitter } from 'events';

class YourStore {
  constructor() {
    // 内部创建一个EventEmitter实例
    this.eventEmitter = new EventEmitter();
  }

  addChangeListener(callback) {
    this.eventEmitter.on('change', callback);
  }

  removeChangeListener(callback) {
    this.eventEmitter.removeListener('change', callback);
  }

  emitChange() {
    this.eventEmitter.emit('change');
  }
}

export default new YourStore();

3. 额外检查点 #

• 确认浏览器环境下安装了events包：Node.js自带events模块，但浏览器环境需要手动安装（npm install events --save）后再导入。
• 组件里要调用实例的方法：确保你在componentWillMount里调用的是store实例的addChangeListener，而不是类本身（比如别写成YourStore.addChangeListener(...)，要写yourStoreInstance.addChangeListener(...)）。
• 组件卸载时记得移除监听：在componentWillUnmount里调用removeChangeListener，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Aries Brylle Ventura