第六篇 再谈观察者模式的具体应用，如监听一个class其中一个属性，如websocket中onmessage的实现

javascript
Copy code
// 主题对象
class Subject {
  constructor() {
    this.observers = []; // 存储观察者
  }

  // 注册观察者
  addObserver(observer) {
    this.observers.push(observer);
  }

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

  // 通知所有观察者
  notify() {
    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.addObserver(observer1);
subject.addObserver(observer2);

// 主题状态发生改变，通知所有观察者
subject.notify();

// 输出：
// Observer 1 收到更新通知
// Observer 2 收到更新通知

class StatefulClass {
  constructor() {
    this._state = null; // 使用下划线表示这是一个私有属性
    this._changeListeners = []; // 存储监听器的数组
  }

  // 定义 state 的 getter 方法
  get state() {
    return this._state;
  }

  // 定义 state 的 setter 方法
  set state(newState) {
    if (this._state !== newState) {
      this._state = newState;
      this.notifyChange(); // 当 state 变化时触发通知
    }
  }

  // 添加监听器
  onchange(callback) {
    this._changeListeners.push(callback);
  }

  // 通知所有监听器状态变化
  notifyChange() {
    this._changeListeners.forEach(callback => {
      callback(this._state);
    });
  }
}

// 使用示例
const myInstance = new StatefulClass();

// 添加监听器
myInstance.onchange((newState) => {
  console.log('State changed:', newState);
});

// 修改 state，会触发监听器
myInstance.state = 'New State'; // 输出: State changed: New State

class Example {
  constructor() {
    this._messageHandler = null; // 私有属性
  }

  // 定义 onmessage 的 getter 方法
  get onmessage() {
    return this._messageHandler;
  }

  // 定义 onmessage 的 setter 方法
  set onmessage(handler) {
    this._messageHandler = handler;
  }
}

// 使用示例
const myExample = new Example();

// 设置 onmessage 处理函数
myExample.onmessage = (e) => {
  console.log('Message received:', e.data);
};

// 获取 onmessage 处理函数
const messageHandler = myExample.onmessage;

// 调用处理函数
if (messageHandler) {
  messageHandler({ data: 'Example message' });
}