Proxy 实现观察者模式

版权声明：如果这篇文章对你有所帮助，请点个赞~~~ https://blog.csdn.net/qq_35087256/article/details/82793808

以下参考阮老师的《ECMAScript 6 入门》

需求：给定一个对象，当对象的属性发生赋值时，打印最新的值。

思路： observable 函数返回一个原始对象的 Proxy 代理，拦截赋值操作，触发充当观察者的各个函数。

//初始化观察者队列
const uniqueObserveList = new Set();

//将监听回调加入队列
const observe = fn => uniqueObserveList.add(fn);

//设置Proxy代理,拦截赋值操作
const observable =  obj => new Proxy(obj, {set});

//用来拦截属性的赋值操作
function set(target, key, value, receiver){
	//内部调用对应的 Reflect 方法
	const result = Reflect.set(target, key, value, receiver);
	//额外执行观察者队列
	uniqueObserveList.forEach( item => item() );
	return result;
}

let data = {
	name:'hello',
	age:30
};

//对data属性进行监听
const person = observable(data);

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

//print作为监听触发的回调函数
observe(print);

person.name = 'world';
		

结果触发2次观察者模式，打印为
world, 30
world, 20