Proxy详解

监听对象属性：

在之前，若希望监听一个对象的相关操作，可通过Object.defineProty来进行监听，它必须深度遍历对象里的每一个属性

const obj={name:'why',age:18,height:1.65
}
// 需求：监听对象属性的所有操作
// 监听属性的操作
// 1.只针对一个属性
// let _name=obj.name
// Object.defineProperty(obj,'name',{
//   set: function(newValue){
//     console.log("监听:给name设置了新值：",newValue);
//     _name=newValue
//   },
//   get: function(){
//     console.log("监听：获取name的值");
//     return _name
//   }
// })// 2.监听所有的属性：遍历所有的属性，对每一个属性使用defineProperty
const keys=Object.keys(obj)
for(const key of keys){let value=obj[key]Object.defineProperty(obj,key,{set: function(newValue){console.log(`监听:给${key}设置了新值`,newValue);value=newValue},get: function(){console.log(`监听：获取${key}的值`);return value}})
}
console.log(obj.name);
console.log(obj.age);
obj.name='zcy'
obj.age=21

缺点：

1.其设计初衷并不是为了去监听一个对象，它一次只能监听对象里的一个属性→若想监听所有，就得遍历对象key

2.目前只能用它监听属性的设置和获取，不能监听增加和删除

在ES6中，新增了一个Proxy类，就是为了我们监听一个对象而生的

先创建一个代理对象，之后对该对象的所有操作，都通过代理对象完成，代理对象可监听我们想要原对象进行哪些操作

优点：

Proxy无需一层层递归为每个属性添加代理，一次即可完成以下操作，性能上更好，并且原本的实现有一些数据不能监听到，但是Proxy可以完美监听到任何方式的数据改变。

唯一缺陷：因为Proxy是ES6中引入的新特性，因此它在一些旧的浏览器或者环境中可能不被支持

const obj={name:'why',age:18,height:1.88
}
// 1.创建一个代理对象
const proxy = new Proxy(obj,{set:function(target,key,newValue){console.log(`监听：监听${key}的设置值：`,newValue);target[key]=newValue},get:function(target,key){console.log(`监听：监听${key}的获取`);return target[key]},deleteProperty:function(target,key){const deleted = delete target[key]console.log(`监听：监听删除${key}属性,删除操作结果：${deleted}`);return delete target[key]},has:function(target,key){console.log(`监听：监听in判断${key}属性`);return key in target}
})
// delete
delete proxy.name;
// has
console.log("age"in proxy);