当前位置：首页 > JavaScript

js实现oberve

2026-04-06 00:56:54JavaScript

实现 JavaScript 的观察者模式

观察者模式是一种设计模式，允许对象（观察者）订阅另一个对象（被观察者）的状态变化。当被观察者的状态发生变化时，它会通知所有观察者。

基本实现方式

创建一个 Subject 类作为被观察者，维护一个观察者列表并提供订阅和通知功能：

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

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

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

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

创建 Observer 类作为观察者，实现 update 方法以响应通知：

class Observer {
  update(data) {
    console.log(`Received data: ${data}`);
  }
}

使用示例

实例化被观察者和观察者，建立订阅关系并触发通知：

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify('State changed!');

subject.unsubscribe(observer2);
subject.notify('Another change');

基于 Proxy 的实现

利用 ES6 的 Proxy 可以创建响应式对象，自动触发观察者通知：

js实现oberve

function createObservable(target, observer) {
  return new Proxy(target, {
    set(obj, prop, value) {
      obj[prop] = value;
      observer.update({ prop, value });
      return true;
    }
  });
}

const observer = {
  update(change) {
    console.log(`Property ${change.prop} set to ${change.value}`);
  }
};

const user = createObservable({}, observer);
user.name = 'John';  // 自动触发观察者通知