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;
...
