Proxy应用和Reflect

1.Proxy是什么？

• 对目标对象代理访问，用于更改操作对象的某些默认行为。
  - 比如：读取或写入对象的属性。
• 是一种“元编程方式”，对编程语言进行编程。
• 当访问目标对象时，用于过滤和改写某些操作。

2.如何用Proxy？

• var proxy = new Proxy(target, handler);生成proxy实例。target是目标对象，handler也是一个对象，用于定义拦截行为。
• 注意，要使得Proxy起作用，必须针对Proxy实例进行操作，而不是针对目标对象进行操作。
  代码示例：

const obj = {
  name: 'ha',
  age: 90,
  _girl: 'zhangjie'
};

const proxy = new Proxy(obj, {
  set (target, key, value) {
    if (key.indexOf('_') > -1) {
      console.log('这是私有属性！！！无法设置');
    } else {
    	// 该代码作用：当设置的属性不是私有属性，则完成赋值操作
        Reflect.set(target, key, value); 
        console.log('1313-obj==', obj);
    }
  },
  get (target, key, value) {
    if (key.indexOf('_') > -1) {
      console.log('这是私有属性！！！无法访问');
    } else {
      console.log('24-target[key]==', target[key]);
    }
  }
});
proxy._girl = 100111111;

结果：

3.那Reflect是什么？怎么用？

• Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。
• 不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。这句话很重要，proxy是用于拦截某些行为。但最终某些操作也很有可能是要真正作用到目标对象上的，而reflect就是起到该作用，用于完成操作对象的默认行为。因此，就有下面的一条。
• Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。

4.proxy的应用场景

• 数据绑定

defineReactive(obj) {

  const handler = {
     get: function (target, prop) {
       console.log(`获取属性${ prop }`);
       if (typeof target[prop] === 'object' && target[prop] !== null) {
         console.log('target[prop]==', target[prop]);
         return new Proxy(target[prop], handler);
       }
       return Reflect.get(target, prop);
     },
     set: function (target, prop, value) {
       console.log(`设置属性${ prop }`);
       return Reflect.set(target, prop, value);
     }
   };
   return new Proxy(obj, handler);
}

• 实现观察者模式

const queuedObservers = new Set();

const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});

function set(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receiver);
  queuedObservers.forEach(observer => observer());
  return result;
}