观察者模式 ( Observer mode ) 指的是函数自动观察数据对象，当数据对象发生改变，函数会自动执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
const person = observable({
  name: "张三",
  age: 20,
});

function print() {
  console.log(`${person.name}, ${person.age}`);
}

observer(print);
person.name = "李四";

// 函数执行：李四， 20

上面代码中，数据对象 person 是观察对象，函数 print 是观察者。当数据对象 person 发生变化， print 就会自动执行。

使用 Proxy 写一个观察者模式的最简单实现，即实现 observable 和observe 这两个函数。思路是 observable 函数返回一个原始对象的 Proxy 代理，拦截赋值操作，触发充当观察者的两个函数。

1
2
3
4
5
6
7
8
9
10
const queuedObservers = new Set();

const observe = (fn) => queuedObservers.add(fn);
const observable = (obj) => new Proxy(obj, { set });

function set(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receive);
  queuedObservers.forEach((observer) => observer());
  return result;
}

上面代码中，先定义了一个 Set 集合，所有观察者函数都放进这个集合。observable 函数返回原始对象的代理，拦截赋值操作。拦截函数 set 中会自动执行的所有观察者。