Proxy 实现的观察者模式

// 观察者集合
const queuedObservers = new Set();

// 观察者函数 把函数加入观察者集合
const observe = (fn) => queuedObservers.add(fn);

// 被观察对象 使用 Proxy 拦截对象，在对象属性变化时，遍历观察者集合中的函数并调用
const observable = (obj) =>
  new Proxy(obj, {
    set: function (target, p, value, receiver) {
      let result = Reflect.set(target, p, value, receiver);
      queuedObservers.forEach((fn) => fn(obj));
      return result;
    },
  });

// 被观察者
const user = observable({
  name: "K",
  age: 20,
});
const person = observable({
  name: "K",
  age: 20,
});

// 打印函数
function print(obj) {
  console.log(obj);
}
function logTime() {
  console.log(new Date().toLocaleString());
}

// 打印函数加入观察者集合
observe(print);
observe(logTime);

user.name = "hhh";
setTimeout(() => (person.age = 30), 2000);