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);