Proxy-Reflect(代理与反射) —响应式原理

代理对象Proxy是用 构造函数Proxy创建出来的。Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。

接受俩个参数：目标对象（target）、处理程序对象(handler)。

var p = new Proxy(target, handler);

处理程序对象中可以定义捕获器，可以捕获13种不同的操作，用来进行基本操作的拦截。

当外界每次对代理对象进行操作时，就会执行处理程序对象(handler)上的一些方法，从而拦截并修改相应的行为。handler 能代理的一些常用的方法如下：

const obj = {
  name: "小二上酒", 
  age: 23
}


const objProxy = new Proxy(obj, {
  // 获取值时的捕获器
  get: function(target, key) {
    console.log(`监听到对象的${key}属性被访问了`, target)
    return target[key]
  },

  // 设置值时的捕获器
  set: function(target, key, newValue) {
    console.log(`监听到对象的${key}属性被设置值`, target)
    target[key] = newValue
  },

  // 监听in的捕获器
  has: function(target, key) {
    console.log(`监听到对象的${key}属性in操作`, target)
    return key in target
  },

  // 监听delete的捕获器
  deleteProperty: function(target, key) {
    console.log(`监听到对象的${key}属性in操作`, target)
    delete target[key]
  }
})

Reflect也是ES6新增的一个API，它是一个对象，它主要提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法；

Reflect对象的方法和Proxy中捕获的基本操作是一一对应的，也是13个，同时 ，如果代理中都手动实现捕获器中操作过于麻烦，根据这个特点可以通过调用Reflect对象的同名方法来轻松搞定r

通过调用Reflect对象来捕获还有一个好处，Reflect对象一些修改、设置对象属性的方法会有布尔类型返回值，可以判断操作是否成功。