Proxy和Reflect

Proxy

Proxy就是目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截

基本用法

let obj={}
let objProxy = new Proxy(obj, {
  get: function (target, propKey, receiver) {//获取obj的propKey时触发
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {//设置obj的propKey时触发
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

13个拦截操作

// new Proxy(obj, handle)
// handle支持的属性
1. get(target, propKey, receiver){//读取对象属性拦截，一般用来收集依赖，receiver代表Proxy对象本身} 

2. set(target, propKey, value, receiver){// 设置target的propKey为value的拦截}

3. has(target, propKey){// 拦截propKey in proxy的操作}  

4. deleteProperty(target, propKey){// 拦截delete proxy[propKey]的操作}

5. construct (target, args, newTarget) {
    return new target(...args);// 拦截target的new命令
  }

6. setPrototypeOf(target, proto)方法主要用来拦截 修改原型对象Object.setPrototypeOf()方法

7. getPrototypeOf()方法主要用来拦截获取对象原型

8. apply (target, ctx, args) {// 拦截函数的调用、call和apply操作
    return Reflect.apply(...arguments);
  }

9. ownKeys(target)// 拦截获取对象属性值的操作

10. getOwnPropertyDescriptor(target,propKey){
  //拦截获取对象属性的描述值的操作Object.getOwnPropertyDescriptor
}

11. defineProperty(){
// 拦截Object.defineProperty(target, key, descriptor）、Object.defineProperties(proxy, propDescs)
}

12. preventExtensions()方法拦截Object.preventExtensions()

13. isExtensible()方法拦截Object.isExtensible()操作

对比Object.defineProperty

Object.defineProperty 是监听对象的字段而非对象本身，因此对于动态插入对象的字段，它无能为了，只能手动为其设置设置监听属性。

Object.defineProperty 无法监听对象中数组的变化，因此其他基于 Object.defineProperty 都对数组做了一定的 Hack 处理。

Proxy 可以为一个对象设置代理，即监听对象本身，任何访问当前被监听的对象的操作，无论是对象本身亦或是对象的字段，都会被 Proxy 拦截。

Proxy不需要深度遍历监听，性能高于Object.defineProperty；

Reflect对象

将Object对象的一些明显属于语言内部的方法放到Reflect对象上
修改某些Object方法的返回结果，让其变得更合理
让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为

Reflect对象的方法与Proxy对象的方法一一对应
可以用Reflect代替Object的操作

Reflect.get(myObject, 'foo') 
Reflect.has(myObject, 'foo') // true
Reflect.deleteProperty(myObj, 'foo');

const myObj = new FancyThing();
// 新写法
Reflect.getPrototypeOf(myObj) === FancyThing.prototype;
...

Proxy和Reflect

Proxy

Reflect对象

推荐阅读更多精彩内容