观察者模式属于行为型设计模式，核心思想是建立对象之间的一对多关联，当被观察的对象（通常称为主题）状态发生改变时，会主动通知所有已注册的观察者对象，观察者收到通知后执行对应的更新逻辑。这种模式可以有效解耦主题和观察者，避免两者之间的直接依赖。
观察者模式的核心角色
在JavaScript中实现观察者模式，通常会涉及两个核心角色：
- 主题（Subject）：负责维护观察者列表，提供添加观察者、移除观察者、通知所有观察者的方法，同时保存自身状态。
- 观察者（Observer）：定义统一的更新方法，当收到主题的通知时，执行对应的业务逻辑。
手动实现观察者模式
下面我们通过一个完整的示例，演示如何在JavaScript中实现一个基础的观察者模式：
// 定义主题类
class Subject {
constructor() {
// 存储所有观察者
this.observers = [];
// 主题自身状态
this.state = null;
}
// 添加观察者
addObserver(observer) {
if (typeof observer.update !== 'function') {
throw new Error('观察者必须包含update方法');
}
this.observers.push(observer);
}
// 移除观察者
removeObserver(observer) {
this.observers = this.observers.filter(item => item !== observer);
}
// 修改状态并通知所有观察者
setState(newState) {
this.state = newState;
this.notifyAll();
}
// 通知所有观察者
notifyAll() {
this.observers.forEach(observer => {
observer.update(this.state);
});
}
}
// 定义观察者类
class Observer {
constructor(name) {
this.name = name;
}
// 统一的更新方法
update(state) {
console.log(`${this.name}收到通知，当前状态为：${state}`);
}
}
// 使用示例
const subject = new Subject();
const observer1 = new Observer('观察者1');
const observer2 = new Observer('观察者2');
// 注册观察者
subject.addObserver(observer1);
subject.addObserver(observer2);
// 修改状态触发通知
subject.setState('状态A');
// 输出：观察者1收到通知，当前状态为：状态A
// 输出：观察者2收到通知，当前状态为：状态A
// 移除一个观察者
subject.removeObserver(observer1);
subject.setState('状态B');
// 输出：观察者2收到通知，当前状态为：状态BJavaScript内置的观察者模式实现
JavaScript其实已经内置了类似观察者模式的机制，最常见的就是事件监听系统。比如DOM的事件绑定，就是典型的观察者模式应用：
// 获取DOM元素作为主题
const button = document.querySelector('button');
// 添加事件监听（相当于注册观察者）
button.addEventListener('click', () => {
console.log('点击事件的观察者1执行');
});
button.addEventListener('click', () => {
console.log('点击事件的观察者2执行');
});
// 触发点击事件时，所有监听函数都会执行
// 这里的button就是主题，click事件对应状态变化，监听函数就是观察者观察者模式的常见使用场景
观察者模式在JavaScript开发中有很多实用场景：
- 前端状态管理：比如Vue的响应式系统、Redux的状态订阅机制，都是基于观察者模式的思路实现。
- 自定义事件系统：在复杂业务场景中，可以通过观察者模式实现模块间的事件通信，避免模块间的直接引用。
- 异步任务通知：当异步操作完成后，需要通知多个依赖模块更新数据时，可使用观察者模式简化逻辑。
注意事项
使用观察者模式时需要注意避免内存泄漏，当观察者不再需要接收通知时，一定要及时从主题的观察者列表中移除，尤其是涉及到DOM元素、长时间存在的全局对象时，未移除的观察者可能会导致相关对象无法被垃圾回收。另外，如果观察者数量过多，频繁触发通知可能会影响性能，此时可以考虑增加通知节流、按需通知等优化逻辑。
观察者模式JavaScript设计模式事件监听修改时间：2026-06-03 00:23:28