一、定義

當客戶不方便直接訪問一個物件或者不滿足需要的時候，提供一個物件來控制堆這個物件的訪問。

二、舉例

惰性單例模式的實現依靠快取代理

三、結構

代理模式需要一個本體物件和一個代理物件。在代理模式下，對於本體物件的特定的操作通過代理物件進行。如圖所示

　　這種模式的關鍵點在於：本體物件和代理物件介面的一致性。也就是說如果需要不通過代理進行操作，那麼直接操作本體物件依然可以。

四、實現

代理模式分為很多類，其中經常用到的有保護代理、虛擬代理、快取代理。

1.保護代理

保護代理的作用是當對本體物件的屬性進行訪問和賦值時，代理物件可以對其進行攔截。

在ES6中，代理是一個已經被實現的知識點，如下：

var obj = {
    _name: "JYY",
    age: 29
};
var objProxy = new Proxy(obj, {
    get: function(target, key){
        if(key === "_name") return undefined;
        return target[key];
    },
    set: function(target, key){
        if(key === "_name") return;
    }
});
objProxy._name; // undefined
objProxy.age; //
 
 29

上面的程式碼中obj是本體物件，objProxy是代理物件，這個代理實現了禁止訪問和設定內部私有屬性的功能。在這段程式碼中，我們使用代理物件對本體物件的get和set方法進行了代理，本體物件和代理物件都包含了這個set和get介面（obj物件本身內部實現了get和set），所以如果我們繞過代理物件直接訪問和賦值本體物件也是可以的：

var obj = {
    _name: "JYY",
    age: 29
};
console.log(obj._name); //JYY
obj._name = "hah";
console.log(obj._name); // hah

保護代理的重點在於，

2.虛擬代理

虛擬代理在我理解，就是使用者認為已經執行了某個功能，事實上卻時使用代理物件進行佔位，待觸發的時機到來，才會真正的執行本體物件的操作。也就是虛擬代理把一些開銷很大的物件，延遲到真正需要他的時候才採取建立。因此虛擬代理的使用伴隨的是效能的提升。

典型的虛擬代理的例子就是節流，如下所示：

var resizeProxy = function(fn){
    let timer = null;
    return function(){
        if(!timer){
            timer = setTimeout(function(){
                fn && fn();
                timer = null;
            },1000)
        }
    }
};
var resizeChange = function(){
    console.log(1);
};
window.onresize = resizeProxy(resizeChange);

這段程式碼是經典的使用節流控制窗體尺寸大小改變事件觸發的例子，作用就是讓resize事件的觸發不那麼頻繁，自定義的控制觸發的頻率，這對於效能的提升很有幫助。

在這段程式碼裡面，resizeChange就是本體，resizeProxy就是代理，如果不使用代理直接將fn複製給window.onresize依舊是可用的。而使用代理的作用就是首先進行佔位，開發中代理內部的程式碼是不可見的（比如提供的是api），利用resizeProxy的不可見性，讓客戶認為已經呼叫了功能程式碼，但是事實上是我們並未立即執行程式碼，因為我們作為開發者知道立即執行會帶來效能的喪失，只有在合適的時機我們才會委託代理執行原生代碼，執行真正的業務程式碼。

3.快取代理

快取代理在單例模式中就已出現，用於建立惰性代理模式，其原理就是在需要時建立物件，並將該物件儲存在閉包中，這樣可以一次建立多次使用。

當然在惰性單例中使用是快取代理最簡單的實現方式。在實際開發中，我們可能會遇到這樣的場景，在tab中每個tab頁都包含多個圖表，因此在點選tab的時候就需要獲取這個tab對應的圖表的資料，這些資料都需要從後端請求。比如以某個省的地市經濟統計情況為例，我們需要的頁面如下：

可見這樣的情況下，使用者很可能不斷地點選tab切換城市，然後和其他城市進行對比。如果每次點選都請求資料，帶給使用者的體驗會非常差。這樣的情況下，我們就可以做個全域性的快取，當然你可以儲存在元件的狀態中，除此之外快取代理也是個很棒的選擇。程式碼如下：

// 請求資料
function requestData(regionName){
    return new Promise(function(resolve, reject){
        var rest = ajax({
            type: "post",
            params: {regionName: regionName}
        })
        resolve(rest);
    })

}
// 初始化資料代理方法
var proxyInit = (function(){
    var cache = {};
    return async function(regionName){
        if(cache[regionName]){
            return cache[regionName];
        }else{
            return cache[regionName] = await requestData(regionName);
        }
    }
});
proxyInit("石家莊");

五、總結

三種類型雖然均為代理模式，但是各自的目的並不相同，保護代理是為了阻止外部對內部物件的訪問或者是操作等；虛擬代理是為了提升效能，延遲本體執行，在合適的時機進行觸發，目的是減少本體的執行次數；快取代理同樣是為了提升效能，但是為了減緩記憶體的壓力，同樣的屬性，在記憶體中只保留一份。