面试高频手撕题 | 18.实现一个观察者模式

一、知识点

观察者模式（Observer Pattern）是一种软件设计模式，它定义了对象之间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。

在观察者模式中，有以下几个角色：

1. 主题（Subject）：被观察的对象，它拥有状态并可以修改状态。
2. 观察者（Observer）：观察主题的对象，当主题的状态发生改变时，观察者会收到通知。
3. 具体主题（ConcreteSubject）：具体的被观察对象，它实现了主题的接口，持有观察者列表，并在状态改变时通知观察者。
4. 具体观察者（ConcreteObserver）：具体的观察对象，它实现了观察者的接口，接收主题的通知并进行相应的处理。

二、思路分析

实现观察者模式的关键是解耦主题和观察者，让它们能够独立变化。以下是一些基本的思路：

1. 主题持有观察者列表，当状态改变时遍历通知观察者。
2. 观察者通过注册或订阅方式向主题登记，以便接收通知。
3. 主题和观察者之间定义一个接口，用于通知状态变化。

三、JavaScript 解答

以下是使用 JavaScript 实现观察者模式的一个简单示例：

class Subject {
  constructor() {
    this.observers = [];
  }

  attachObserver(observer) {
    this.observers.push(observer);
  }

  detachObserver(observer) {
    this.observers = this.observers.filter(item => item !== observer);
  }

  notifyObservers() {
    this.observers.forEach(observer => observer.update());
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  update() {
    console.log(`${this.name} 收到通知`);
  }
}

// 创建主题对象
const subject = new Subject();

// 创建观察者对象
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');

// 观察者注册到主题
subject.attachObserver(observer1);
subject.attachObserver(observer2);

// 主题发出通知
subject.notifyObservers();

// 观察者取消注册
subject.detachObserver(observer1);

// 主题再次发出通知
subject.notifyObservers();

在上述示例中，我们创建了一个Subject类和一个Observer类。Subject类负责管理观察者，并提供了attachObserver、detachObserver和notifyObservers方法。Obs类是具体的观察者，它实现了方法用于接收通知。