JS Proxy

• 第一个传入的参数是我们要对其拦截的那个对象（这个对象可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
• 第二个参数是一个对象，这个对象的属性是当执行一个操作时定义代理的行为的函数，（就是拦截的回调函数）

示例：

let test = {
       'name':'ni'
     }
     let a = new Proxy(test, {
       get(target, key) { //访问回调
       console.log('访问了我们要进行代理对象的属性值')
         return target[key];
       },
       set(target, key,newdata){//更改触发回调，newdata是更改的value值
         console.log('修改了某个属性值')
         return Reflect.set(target, key, newdata);
       }
     })
     console.log(a.name)
     a.name = '2'
     console.log(a.name)

proxy有点跟Object.defineProperty很像，区别在于

• proxy可以代理整个对象，而defineProperty只能代理对象某个属性值（从使用方法参数就能看出来），所以当对象新增属性的时候，Proxy可以监听到，Object.defineProperty监听不到

• defineProperty不能对数组操作，proxy可以

• proxy彻底不兼容IE，defineProperty可以兼容到ie8

• proxy是默认可枚举的

所以后来的vue3的双向绑定就用了proxy来处理

proxy处理数组

  var oldobj = []
    var obj = new Proxy(oldobj, {
      get: function(target, key, receiver) {
        return target[key]
      },
      set: function(target, key, value, receiver) {
        target[key] = value;
        console.log(`修改了key:${key},新值：${value}`)
        return true
      }
    })
    obj[0] = 1;
    obj.push(3)
    console.log(oldobj)

proxy会把数组当成一个key，value的形式