【es6进阶】如何使用Proxy实现自己的观察者模式

观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。这里，我们是使用es6的proxy及reflect来实现这个效果。

实现效果

业务分析

• 源数据

const object2 = {name: "张三",age: 20,
};

• 包装源数据的方法

function observable(object) {return new Proxy(object, {get(object, key) {console.log(`你访问了${key}`);return Reflect.get(object, key);},set(object, key, value) {const result = Reflect.set(object, key, value);// 触发更新for (const observer of queuedObservers) {observer();}return result;},});
}

• 包装数据

// 数据监听
const person = observable(object2);

• 收集依赖，哪里在使用这个数据

const queuedObservers = new Set();const observe = (callback) => {queuedObservers.add(callback);
};//这里就是依赖
function print() {console.log(`${person.name}今年${person.age}岁`);
}
// 收集依赖
observe(print);

• 改变数据，触发更新即可

person.age= 400