Proxy

Proxy就是目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問，都必須先通過這層攔截

• 基本用法

let obj={}
let objProxy = new Proxy(obj, {
  get: function (target, propKey, receiver) {//獲取obj的propKey時(shí)觸發(fā)
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {//設(shè)置obj的propKey時(shí)觸發(fā)
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

• 13個(gè)攔截操作

// new Proxy(obj, handle)
// handle支持的屬性
1. get(target, propKey, receiver){//讀取對(duì)象屬性攔截，一般用來收集依賴，receiver代表Proxy對(duì)象本身} 

2. set(target, propKey, value, receiver){// 設(shè)置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)方法主要用來攔截 修改原型對(duì)象Object.setPrototypeOf()方法

7. getPrototypeOf()方法主要用來攔截獲取對(duì)象原型

8. apply (target, ctx, args) {// 攔截函數(shù)的調(diào)用、call和apply操作
    return Reflect.apply(...arguments);
  }

9. ownKeys(target)// 攔截獲取對(duì)象屬性值的操作

10. getOwnPropertyDescriptor(target,propKey){
  //攔截獲取對(duì)象屬性的描述值的操作Object.getOwnPropertyDescriptor
}

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

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

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

• 對(duì)比Object.defineProperty

Object.defineProperty 是監(jiān)聽對(duì)象的字段而非對(duì)象本身，因此對(duì)于動(dòng)態(tài)插入對(duì)象的字段，它無能為了，只能手動(dòng)為其設(shè)置設(shè)置監(jiān)聽屬性。

Object.defineProperty 無法監(jiān)聽對(duì)象中數(shù)組的變化，因此其他基于 Object.defineProperty 都對(duì)數(shù)組做了一定的 Hack 處理。

Proxy 可以為一個(gè)對(duì)象設(shè)置代理，即監(jiān)聽對(duì)象本身，任何訪問當(dāng)前被監(jiān)聽的對(duì)象的操作，無論是對(duì)象本身亦或是對(duì)象的字段，都會(huì)被 Proxy 攔截。

Proxy不需要深度遍歷監(jiān)聽，性能高于Object.defineProperty；

Reflect對(duì)象

1. 將Object對(duì)象的一些明顯屬于語言內(nèi)部的方法放到Reflect對(duì)象上
2. 修改某些Object方法的返回結(jié)果，讓其變得更合理
3. 讓Object操作都變成函數(shù)行為。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)讓它們變成了函數(shù)行為

• Reflect對(duì)象的方法與Proxy對(duì)象的方法一一對(duì)應(yīng)

• 可以用Reflect代替Object的操作

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

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