如果你只是想作为一个普通的开发者，对这两个的理解可以不那么透彻，但是你想作为框架或组件的开发者，就需要对其有比较深的认识了。

1.监听对象的操作

现在有一个需求：有一个对象，我们希望监听这个对象中的属性被设置或获取的过程。

我们可以通过Object.defineProperty的存储属性描述符来对属性的操作进行监听。实际上vue2的响应式原理和这个类似。

const obj1 = {
        name: "name",
        age: "age"
      }
 
      Object.keys(obj1).forEach(key => {
        let value = obj1[key]
        Object.defineProperty(obj, key, {
          set: function(newValue) {
            console.log(`监听到给${key}设置值`);
            value = newValue
          },
          get: function(){
            console.log(`监听到获取${key}值`);
            return value
          }
        })
      })

这样做的缺点：

• 首先Object.defineProperty设计的初衷不是为了去监听一个对象中的所有属性，我们在定义某些属性的时候，初衷其实是定义普通的属性，但是后面我们强行将它变成了数据属性描述符。
• 其次，如果我们想要监听更加丰富的操作，比较新增属性、删除属性，那么Object.defineProperty是无能为力的。

所以ES6中新增了一个Proxy类。

2.Proxy的基本使用

Proxy类是用于帮助我们创建一个代理的。

• 如果我们希望监听一个对象的相关操作，我们可以先创建一个代理对象（Proxy对象）；
• 之后对该对象的所有操作，都通过代理对象来完成，代理对象可以监听我们想要对原对象进行哪些操作。

首先我们需要new一个Proxy对象，并且传入需要侦听的对象以及一个处理对象，这个处理对象可以称之为handler。

const proxy = new Proxy (target, handler) //语法

我们之后的操作都是对Proxy的操作，而不是原有的对象，因为我们需要在handler里面进行侦听。

const obj = {
name: "zzz",
age: "18"
}
 
const proxy = new Proxy(obj, {})

3.Proxy的set和get捕获器

如果我们想要侦听某些具体的操作，就可以在handler中添加对应的捕捉器（Trap）：

set和get分别对应的是函数类型；

set函数有四个参数：

• target：目标对象（侦听的对象）；
• property：将被设置的属性key；
• value：新属性值；
• receiver：调用的代理对象；

get函数有三个参数：

• target：目标对象（侦听的对象）；
• property：被获取的属性key；
• receiver：调用的代理对象；

const obj1 = {
        name: "name",
        age: "age"
      }
 
      const proxy = new Proxy(obj1, {
        has: function(target, key) {
          console.log("has捕捉器", key)
          return key in target
        },
        set: function(target, key, value) {
          console.log("set捕捉器", key)
          target[key] = value
        },
        get: function(target, key) {
          console.log("get捕捉器", key)
          return  target[key]
        },
        deleteProperty: function(target, key) {
          console.log("delete捕捉器")
          delete target[key]
        }
      })
      proxy.name = "sss"

后面想要修改对象，通过操作proxy对象就可以实现了，并且可以实现对对象的侦听。

4.Proxy的所有捕获器

handler.getPrototypeOf()

• Object.getPrototypeOf 方法的捕捉器。

handler.setPrototypeOf()

• Object.setPrototypeOf 方法的捕捉器。

handler.isExtensible()

• Object.isExtensible 方法的捕捉器(判断是否可以新增属性)。

handler.preventExtensions()

• Object.preventExtensions 方法的捕捉器。

handler.getOwnPropertyDescriptor()

• Object.getOwnPropertyDescriptor 方法的捕捉器。

handler.defineProperty()

• Object.defineProperty 方法的捕捉器。

handler.ownKeys()

• Object.getOwnPropertyNames 方法和Object.getOwnPropertySymbols 方法的捕捉器。

handler.has()

• in 操作符的捕捉器。

handler.get()

• 属性读取操作的捕捉器。

handler.set()

• 属性设置操作的捕捉器。

handler.deleteProperty()

• delete 操作符的捕捉器。

handler.apply()

• 函数调用操作的捕捉器。

handler.construct()

• new 操作符的捕捉器。

5.Proxy的construct和apply

捕捉器中还有construct和apply，它们是应用于函数对象的

6.Reflect的作用与使用

Reflect是ES6新增的一个API，是一个对象，字面的意思是反射。

它主要提供了很多操作Javascript对象的方法，有点像Object中操作对象的方法；

• 比如Reflect.getPrototypeOf(target)类似于Object.getPrototypeOf();
• 比如Reflect.defineProperty(target, propertyKey, attributes)类似于Object.defineProperty();

如果我们有Object可以做这些操作，那么为什么还需要有Reflect这样的新增对象？

• 这是因为在早期的ECMA规范中没有考虑到这种对 对象本身 的操作如何设计会更加规范，所以将这些API放到了Object上面；
• 但是Object作为一个构造函数，这些操作实际上放到它身上并不合适；
• 另外还包含一些类似于 in、delete操作符，让JS看起来是会有一些奇怪的；
• 所以在ES6中新增了Reflect，让我们这些操作都集中到了Reflect对象上；
• 另外在使用Proxy时，可以做到不操作原对象；

const obj1 = {
        name: "name",
        age: "age"
      }
 
      const proxy = new Proxy(obj1, {
        has: function(target, key) {
          console.log("has捕捉器", key)
          return Reflect.has(target, key)
        },
        set: function(target, key, value, receiver) {
          console.log("set捕捉器", key)
          return Reflect.set(target, key, value, receiver)
        },
        get: function(target, key, receiver) {
          console.log("get捕捉器", key)
          return Reflect.get(target, key, receiver)
        },
        deleteProperty: function(target, key) {
          console.log("delete捕捉器")
          return Reflect.deleteProperty(target, key)
        }
      })

7.Reflect的常见方法