ES6知识点补充——Proxy-Reflect持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

监听对象的操作

场景：监听一个对象中的属性被设置或获取的过程

方式一：可以利用Object. defineProperty实现

const obj = {
  name: "唔西迪西",
  age: 18
}

Object.keys(obj).forEach(key => {
  let value = obj[key]

  Object.defineProperty(obj, key, {
    get: function() {
      console.log(`监听到obj对象的${key}属性被访问了`)
      return value
    },
    set: function(newValue) {
      console.log(`监听到obj对象的${key}属性被设置值`)
      value = newValue
    }
  })
})

obj.name = "玛卡巴卡"
obj.age = 30

console.log(obj.name)
console.log(obj.age)

缺点：

Object. defineProperty 就不是用来监听对象的属性的，但利用它的特性可以实现
Object. defineProperty 不能监听新增属性、删除属性的操作等其它操作
无法监听数组变化，Vue 通过 Hack 改写八种数组方法实现

Proxy

ES6新增的一个类，Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
所以实现监听时监听的不是原来的对象，而是监听原来对象的代理对象

使用：

// target：要代理的对象；   handler：里面包含捕获器方法
const proxy = new Proxy(target, handler);

MDN对Proxy的传入参数解释：

handler：包含捕捉器（Trap）的占位符对象，可译为处理器对象
traps：提供属性访问的方法，这类似于操作系统中捕获器的概念
target：被 Proxy 处理虚拟化的对象，它常被作为代理的存储后端，根据目标验证关于对象不可扩展性或不可配置属性的不变量（保持不变的语义）

现在我们通过Proxy中捕获器的重写来实现监听一个对象中的属性被设置或获取的过程：

const obj = {
  name: "唔西迪西",
  age: 18
}

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

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

proxy.name = "玛卡巴卡"
proxy.age = 30

console.log(proxy.name)
console.log(proxy.age)

Proxy捕获器

上面已经使用了get和set捕获器，接下来介绍一些其他常见的捕获器

in 操作符的捕捉器

handler.has()方法是针对in操作符的代理方法

const obj = {
  name: "唔西迪西",
  age: 18
}

const objProxy = new Proxy(obj, {
  // 监听in的捕获器
  // has 有target, key，没有 receiver
  has: function(target, key) {
    console.log(`监听到对象的${key}属性in操作`, target)
    return key in target
  }
})

// in操作符
console.log("name" in objProxy)

delete 操作符的捕捉器。

handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作。

const obj = {
  name: "唔西迪西",
  age: 18
}

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

Reflect

ES6新增的一个API，它是一个内置的对象，它提供拦截 JavaScript 操作的方法。但它不是一个函数对象，因此它是不可构造的。

一般我们见到Reflect是跟Proxy一起使用的

Reflect ****对象是一个内置对象，提供了与 JavaScript 对象交互的方法，与原来我们学过的Object方法类似，但还是有一些差异，可以看看MDN对它们差异的总结

现在我们通过Proxy和Reflect来实现开头的场景：

const obj = {
  name: "唔西迪西",
  age: 18
}

const proxy = new Proxy(obj, {
  get: function(target, key) {
    console.log(`监听到对象的${key}属性被访问了`, target)
    return Reflect.get(target, key)
  },

  set: function(target, key, newValue) {
    console.log(`监听到对象的${key}属性被设置值`, target)
    Reflect.set(target, key, newValue) // 返回的是Boolean
  }
  })
});

proxy.name = "玛卡巴卡"
console.log(proxy.name)

补充：只有get和set的参数有receiver，receiver是指创建出来的代理对象

get: function(target, key,receiver) {}
set: function(target, key, newValue,receiver) {}