ES6利用Proxy+Reflect搭建观察者模式的简单实现
当对象间存在一对多关系时，则使用观察者模式。比如，当一个对象被修改时，则会自动通知依赖它的对象。
粗略地来说Proxy1可以认为是拦截器，对某对象设置拦截器后，其他操作想操作该对象都会先经过拦截器，由拦截器施加操作和判断放行。Reflect2则是保存对象的默认状态下、无拦截器和其他附加关卡的操作方法，例如本例中对person对象的属性赋值操作设置拦截器后，放行状态下调用Reflect中的方法赋值.
HTML代码
<!DOCTYPE html>
<html lang="zh">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<h2>ObserverMode观察者模式：当对象间存在一对多关系时，则使用观察者模式。比如，当一个对象被修改时，则会自动通知依赖它的对象。</h2>
<h2>借助Proxy+Reflect实现观察者模式</h2>
<script type="text/javascript">
//设置对象person Proxy第一个参数为目标对象
const person = {
name: 'Zhang San',
age: 21
};
//Proxy第二个参数 具体的拦截行为
let handler = {
//set是方法 拦截某个属性的赋值操作
set: function(obj,prop,value){
//只针对 age 属性
if(prop === 'age'){
console.log('Age Change Catched.');
console.log(person.age);//变前 21
//检测到变化
if(person.age !== value){
let before = person.age;
let after = value;
console.log(`CHANGE! ${before} to ${after}`);
}
//借助Reflect完成该对象的set操作 保持最初默认操作
//本例可用obj.age=value,但不推荐.
Reflect.set(obj,'age',value);
}
else{
obj[prop] = value;
}
}
}
//给对象person部署拦截器
let proxy = new Proxy(person,handler);
//重新赋值age
proxy.age = 90;
console.log("原对象: ",person.age);//90
console.log("拦截器对象:",proxy.age);//90
// 下图为不经过拦截器赋值，则不产生拦截行为
person.age = 700;
console.log( "直接修改原对象: ",proxy.age);//90
</script>
</body>
</html>
console输出结果:
MDN中文文档解释
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
