es6 Proxy的终极方法

1.什么是proxy

proxy俗称为代理，其原理就是截取目标对象的一些操作，例如 赋值、查看等等。其中最常用的应该是get，set操作了

2.怎么对目标对象进行代理呢

2.1需要对使用Proxy函数对目标对象进行绑定，目标对象可以使数组，也可以是对象，函数

···
var proxy = new Proxy(target, handler);
···

2.2 实际操作

···
// 将{name: ‘测试’}这个对象绑定get拦截，并且实例化为obj对象
const obj = new Proxy({name: ‘测试’}, {
// 拦截对目标对象的查看操作
get(target, propKey){
console.log(‘拦截对象’, target);
console.log(‘操作的属性’, propKey);
}
})
// 查看操作
obj.name;
···
其他的操作都类似

2.4对复杂对象进行监听拦截

···
/**

• 给对象设置proxy
• @param obj 需要使用proxy代理的属性
• @param cb 回调函数，当前元素的触发属性的方法后执行
• @returns 返回当前对象proxy实例对象
  */
  deepProxy(obj: any, cb) {

<!-- 如果当前目标对象是一个复杂对象是进行深层代理 -->
if (typeof obj === 'object') {
  <!-- 给当前对象的每一个属性进行遍历，代理 -->
  for (const key in obj) {
    if (typeof obj[key] === 'object') {
      <!-- 可以在这排除不想要进行代理的属性或者对象 -->
      if (obj[key].hasOwnProperty('text')) {
        continue;
      }
      obj[key] = this.deepProxy(obj[key], cb);
    }
  }
}
<!-- 返回当前对象的代理 -->
return new Proxy(obj, {
  set(target, key, value, receiver) {
    <!-- 回调函数，对当前类型的操作的一个函数 -->
    cb();
    return Reflect.set(target, key, value, receiver);
  },
  deleteProperty(target, key) {
     <!-- 回调函数，对当前类型的操作的一个函数 -->
    cb();
    return Reflect.deleteProperty(target, key);
  }
});

}
···