实现一个简单的 EventEmitter 类

推荐答案

// www.javascriptcn.com code example
class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  }

  emit(event, ...args) {
    if (this.events[event]) {
      this.events[event].forEach(listener => listener(...args));
    }
  }

  off(event, listener) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(l => l !== listener);
    }
  }

  once(event, listener) {
    const onceListener = (...args) => {
      listener(...args);
      this.off(event, onceListener);
    };
    this.on(event, onceListener);
  }
}

本题详细解读

1. 类的初始化

• EventEmitter 类在构造函数中初始化了一个 events 对象，用于存储事件及其对应的监听器。

2. on 方法

• on 方法用于订阅事件。它接收两个参数：event（事件名称）和 listener（监听器函数）。
• 如果 events 对象中还没有该事件的监听器数组，则创建一个空数组。
• 将监听器函数添加到对应事件的监听器数组中。

3. emit 方法

• emit 方法用于触发事件。它接收两个参数：event（事件名称）和 ...args（传递给监听器的参数）。
• 如果 events 对象中存在该事件的监听器数组，则遍历数组并依次调用每个监听器函数，传入 ...args 作为参数。

4. off 方法

• off 方法用于取消订阅事件。它接收两个参数：event（事件名称）和 listener（监听器函数）。
• 如果 events 对象中存在该事件的监听器数组，则过滤掉与传入的监听器函数相同的函数。

5. once 方法

• once 方法用于订阅一次性事件。它接收两个参数：event（事件名称）和 listener（监听器函数）。
• 创建一个新的监听器函数 onceListener，在调用传入的监听器函数后，自动取消订阅该事件。
• 使用 on 方法将 onceListener 添加到对应事件的监听器数组中。