首页 > 文章 > 前端

JavaScript观察者模式原理与实现方法

时间：2026-02-01 17:30:33 393浏览收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JavaScript观察者模式详解与实现》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

观察者模式通过主题与观察者解耦实现状态自动通知，JavaScript中可用于事件处理与数据绑定。

JavaScript观察者模式实现

观察者模式是一种设计模式，用于在对象之间定义一对多的依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都会自动收到通知。在JavaScript中，这种模式常用于事件处理、数据绑定等场景。下面是一个简洁而实用的观察者模式实现。

核心概念说明

观察者模式包含两个主要角色：

主题（Subject）：维护一组观察者，提供添加、删除和通知观察者的方法。
观察者（Observer）：订阅主题，一旦主题状态变化，就会收到通知并作出响应。

基本实现代码

以下是一个基于类的JavaScript实现：

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

  // 添加观察者
  addObserver(observer) {
    if (typeof observer.update === 'function') {
      this.observers.push(observer);
    }
  }

  // 移除观察者
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  // 通知所有观察者
  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

// 观察者类（可选，只是一个有update方法的对象）
class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received:`, data);
  }
}

使用示例

下面是具体的调用方式：

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

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

// 注册观察者
subject.addObserver(observer1);
subject.addObserver(observer2);

// 发布通知
subject.notify('Hello from the subject!');

// 可以动态移除
subject.removeObserver(observer1);
subject.notify('Second message');

输出结果为：

Observer 1 received: Hello from the subject! Observer 2 received: Hello from the subject! Observer 2 received: Second message

实际应用场景

这个模式非常适合用在以下情况：

组件间通信（如前端组件状态同步）
事件总线或自定义事件系统
数据模型变更通知视图更新（类似MVVM）

你可以将Subject扩展为EventEmitter的基础结构，支持不同事件类型、命名事件、once方法等。

基本上就这些。不复杂但很实用。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

前往漫画官网入口并下载 ➜