所謂的代理者是指一個類別可以作為其它東西的接口。代理者可以作任何東西的接口：網絡連接、內存中的大對象、文件或其它昂貴或無法復制的資源。著名的代理模式例子為引用計數（英語：reference counting）指針對象。

當一個復雜對象的多份副本須存在時，代理模式可以結合享元模式以減少內存用量。典型作法是創建一個復雜對象及多個代理者，每個代理者會引用到原本的復雜對象。而作用在代理者的運算會轉送到原本對象。一旦所有的代理者都不存在時，復雜對象會被移除。

web前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階視頻教程，希望新手少走彎路

var backPhoneList = ['12345566'];//黑色單列表
//  代理
var ProxyAcceptPhone = function(phone){
 console.log('電話正在接入...')
 if(backPhoneList.includes(phone)){
     console.log('屏蔽黑名單電話')
 }else{
    //  轉接
    AcceptPhone.call(this,phone)
 }
}
// 本體
var AcceptPhone = function(phone){
console.log('接聽電話',phone)
}
// 外部調用代理
ProxyAcceptPhone('12345566')
ProxyAcceptPhone('18900044440')

什么是Proxy對象？

Proxy對象就是可以讓你去對JavaScript中的一切合法對象的基本操作進行自定義.然后用你自定義的操作去覆蓋其對象的基本操作.也就是當一個對象去執行一個基本操作時,其執行的過程和結果是你自定義的,而不是對象的。

首先Proxy的語法是:

let p = new Proxy(target, handler);

1. target是你要代理的對象.它可以是JavaScript中的任何合法對象.如: (數組, 對象, 函數等等)

2. handler是你要自定義操作方法的一個集合.

3. p是一個被代理后的新對象,它擁有target的一切屬性和方法.只不過其行為和結果是在handler中自定義的.

在支持 Proxy 的瀏覽器環境中，Proxy 是一個全局對象， 可以直接使用。Proxy(target, handler) 是一個構造函數，target 是被代理的對象， handlder 是聲明了各類代理操作的對象，最終返回一個代理對象。 外界每次通過代理對象訪問 target 對象的屬性時，就會經過 handler 對象， 從這個流程來看，代理對象很類似 middleware（中間件）。 那么 Proxy 可以攔截什么操作呢？ 最常見的就是 get（讀取）、set（修改）對象屬性等操作， 此外，Proxy 對象還提供了一個 revoke 方法，可以隨時注銷所有的代理操作。

let obj ={
  a:1,
  b:2
}
const p = new Proxy(obj,{
  get(target,key,value){
    if(key == 'c'){
      return '我是自定義的2一個結果'
    }else{
      return target[key];
    }
  },
  set(target,key,value){
    if(value==4){
      target[key]='我是自定義的一個結果'
    }else{
      target[key] = value;
    }
  }
})
console.log(obj.a)//1
console.log(obj.c)//underfined
console.log(p.a)//1
console.log(p.c)//我是自定義的一個結果
obj.name = '李白'
console.log(obj.name)//李白
console.log(p.name)//李白
p.age=4
console.log(obj.age)//我是自定義的一個結果
console.log(p.age)//我是自定義的一個結果

Proxy對象的作用.即是之前所受的用于定義基本操作的自定義行為. 同樣的get和set操作.沒有沒代理的對象所得的結果是其JavaScript本身的執行機制運行計算后所得到的. 而被代理了的對象的結果則是我們自定義的.

Proxy所能代理的范圍—handler

在上面代碼中,我們看到了構造一個代理對象時所傳的第二個參數handler, 這個handler對象是由get和set兩個函數方法組成的. 這兩個方法會在一個對象被get和set時被調用執行, 以代替原生對象上的操作.那么為什么在handler, 定義get和set這兩個函數名之后就代理對象上的get和set操作了呢? 實際上handler本身就是ES6所新設計的一個對象.它的作用就是用來自定義代理對象的各種可代理操作。 它本身一共有13中方法,每種方法都可以代理一種操作.

其13種方法如下:

handler.getPrototypeOf()
// 在讀取代理對象的原型時觸發該操作，比如在執行 Object.getPrototypeOf(proxy) 時。
handler.setPrototypeOf()
// 在設置代理對象的原型時觸發該操作，比如在執行 Object.setPrototypeOf(proxy, null) 時。
handler.isExtensible()
// 在判斷一個代理對象是否是可擴展時觸發該操作，比如在執行 Object.isExtensible(proxy) 時。
handler.preventExtensions()
// 在讓一個代理對象不可擴展時觸發該操作，比如在執行 Object.preventExtensions(proxy) 時。
handler.getOwnPropertyDescriptor()
// 在獲取代理對象某個屬性的屬性描述時觸發該操作，
//比如在執行 Object.getOwnPropertyDescriptor(proxy, "foo") 時。
handler.defineProperty()
// 在定義代理對象某個屬性時的屬性描述時觸發該操作，
//比如在執行 Object.defineProperty(proxy, "foo", {}) 時。
handler.has()
// 在判斷代理對象是否擁有某個屬性時觸發該操作，比如在執行 "foo" in proxy 時。
handler.get()
// 在讀取代理對象的某個屬性時觸發該操作，比如在執行 proxy.foo 時。
handler.set()
// 在給代理對象的某個屬性賦值時觸發該操作，比如在執行 proxy.foo = 1 時。
handler.deleteProperty()
// 在刪除代理對象的某個屬性時觸發該操作，比如在執行 delete proxy.foo 時。
handler.ownKeys()
// 在獲取代理對象的所有屬性鍵時觸發該操作，比如在執行 Object.getOwnPropertyNames(proxy) 時。
handler.apply()
// 在調用一個目標對象為函數的代理對象時觸發該操作，比如在執行 proxy() 時。
handler.construct()
// 在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行new proxy() 時。

Proxy的作用

對于代理模式Proxy的作用主要體現在三個方面:

1、 攔截和監視外部對對象的訪問
2、 降低函數或類的復雜度
3、 在復雜操作前對操作進行校驗或對所需資源進行管理