Proxy和Reflect

当使用proxy进行数据绑定与观察的时候，监听set和get方法，使用

get (target, prop, receiver) {
  return Reflect.get(target, prop, receiver)
}

或者

get (target, prop, receiver) {
  return target[prop]
}

他们有什么区别吗？

可以直观的从参数使用上看到第二种少用了个receiver，那receiver时什么意思呢

MDN上的意思是代理或从代理继承的对象

我们来看一个示例：

let animal = {
  _name: "Animal",
  get name () {
    return this._name
  }
}

let animalProxy = new Proxy(animal, {
  get (target, prop, receiver) {
    // return Reflect.get(target, prop, receiver)
    return target[prop]
  }
})

let dog = {
  __proto__: animalProxy,
  _name: "Dog"
}
console.log(dog.name)

创建了一个animal，一个dog，dog的隐式原型指向animal

当读取 dog.name，因为 dog 对象没有这个属性，搜索就转向了它的原型 animalProxy

从 animalProxy 中读取 name 属性时，它的 get 方法就会触发，此时返回target[prop]，这个target就是animal

所以返回的这个就是animal里面的_name “Animal”

但我们希望的输出结果是 Dog ,此时 receiver 参数就排上用场了，当然肯定不能直接 return receiver[prop]，这样会无限循环递归调用，控制台会打印堆栈溢出

此时就需要使用 Reflect.get(target, prop, receiver) 正确地传递执行上下文(this)

当然也可以使用更短的写法

get(target, prop, receiver) {
  return Reflect.get(...arguments);
}

总结

其实一般情况下我们很难遇到这种继承调用的关系，所以平常开发中是可以使用 target[prop]，当然如果封装框架那就需要考虑全面使用 Reflect.get(target, prop, receiver)