前段時間我一個很慫的朋友說希望我給他介紹一個女朋友，簡稱songHai，我就托朋友幫忙物色了一個。那么怎么讓這個慫貨開始的時候不尬聊，那不得讓雙方有一個初步的了解。這個時候就需要代理模式。

定義

顧名思義就是幫別人做(zuo)事(mei)、解(la)決(pi)問(tiao)題，

代理模式(Proxy)，為其他對象提供一種代理以控制這個對象的訪問。
首先songHai需要知道對方的名字，為了一個好印象，開局送了輛寶馬，不差錢。

// 先聲明美女對象
var girl = function (name) {
    this.name = name;
};

// 這是慫海
var songHai= function (girl) {
    this.girl = girl;
    this.sendGift= function (gift) {
        alert("Hi " + girl.name + ", 慫逼送你一個禮物：" + gift);
    }
};

// 好人是為代理
var proxyGoodMen = function (girl) {
    this.girl = girl;
    this.sendGift = function (gift) {
        (new songHai(girl)).sendGift(gift); // 替songHai送寶馬過去嘍
    }
};

在songHai 和proxyGoodMen 之間，屬性和方法是很相近的，不同的是，對象songHai因為某種原因，不方便去直接執(zhí)行sendGift，需要proxyGoodMen去代為執(zhí)行。

執(zhí)行方式

var proxy = new proxyTom(new girl("知名網(wǎng)紅小妹"));
proxy.sendGift("寶馬");

代理模式常用場景

• 1、遠程代理，也就是為了一個對象在不同的地址空間提供局部代表，這樣可以隱藏一個對象存在于不同地址空間的事實，就像web service里的代理類一樣。

• 2、虛擬代理，根據(jù)需要創(chuàng)建開銷很大的對象，通過它來存放實例化需要很長時間的真實對象，這樣就可以達到性能的最優(yōu)化，比如說你打開一個很大的HTML網(wǎng)頁時，里面可能有很多的文字與圖片，整個網(wǎng)頁很快就可以打開，但你此時看到的是所有的文字，圖片是一張張加載后才能看到，那些未下載的圖片替代區(qū)域就是通過虛擬代理代替了真實的圖片，

• 3、安全代理，用來控制真實對象訪問時的權(quán)限，一般用于對象應(yīng)該有不同的訪問權(quán)限。

• 4、智能指引 ，是指當(dāng)調(diào)用真實的對象時，代理處理另外一些事。

代理模式其實就是在訪問對象時引入一定程度的間接性，因為這種間接性，可以附加多種用途。

用虛擬代理實現(xiàn)圖片loading

看下面一段代碼

var myImage = (function(){
    var imgNode = document.createElement("img");
    imgNode.alt='imgNode'
    document.body.appendChild(imgNode);
    return {
        setSrc: function(src){
            imgNode.src = src;
            console.log('1')
        } 
    }
}());

var proxyImage = (function(){
    /**用來檢測圖片地址變化的對象img,并不會添加到界面中，只當(dāng)做為與
    被代理圖片有相同src屬性的對象。
    **/
    var img = new Image();
    img.onload = function(){
        console.log('4')
        myImage.setSrc( this.src );
        console.log('5')
    }
    return {
    setSrc: function(src){
        console.log('2')
        myImage.setSrc( "loading.gif" );
        console.log('3')
        img.src = src;
    }
  }
})();

proxyImage.setSrc("load.jpg");

打印出的結(jié)果：

1
3
/**img.src = src  修改img 屬性，圖片加載完畢后觸發(fā)img.onload函數(shù)**/
4
1
5

proxyImage對象首先調(diào)用了myImage.setSrc方法，加載一個加載速度快或者常用緩存好的圖片，將將要加載的圖片src賦值給 img對象，通過img.onload監(jiān)測將要加載圖片是否加載完成，然后再次調(diào)用myImage.setSrc方法。

es6中的proxy

在支持 Proxy 的瀏覽器環(huán)境中，Proxy是一個全局對象，可以直接使用。 Proxy(target, handler)是一個構(gòu)造函數(shù)， target是被代理的對象 handlde是聲明了各類代理操作的對象，最終返回一個代理對象。外界每次通過代理對象訪問 target對象的屬性時，就會經(jīng)過 handler對象，從這個流程來看，代理對象很類似 middleware（中間件）。那么 Proxy 可以攔截什么操作呢？最常見的就是 get（讀?。?/code>、 set（修改）對象屬性等操作，完整操作。