什么是代理模式

引入一個(gè)現(xiàn)實(shí)生活中的案例

我們作為用戶需要去如何評(píng)估一個(gè)房子的好壞、如何辦理住房手續(xù)等一些列繁瑣的事物嗎？顯然，用戶肯定不愿意這樣做。用戶最關(guān)心的是結(jié)果，用戶對(duì)房子提出需求以及提供對(duì)等價(jià)值的金錢就可以獲得滿意的房子，這就是結(jié)果。

那么誰(shuí)為用戶去解決一系列繁瑣的買房過(guò)程呢？當(dāng)然就是“房屋中介”了！房屋中介的作用就是在房地產(chǎn)開(kāi)發(fā)經(jīng)營(yíng)與消費(fèi)的供求市場(chǎng)中，為交易物體提供評(píng)估、交易、代理、咨詢等服務(wù)及善后服務(wù)的機(jī)構(gòu)。

結(jié)合案例理解代理模式的定義

在某些情況下，一個(gè)對(duì)象不適合或者不能直接引用另一個(gè)對(duì)象，而代理對(duì)象可以在客戶端和目標(biāo)對(duì)象之間起到中介的作用。

代理模式就是為其他用戶提供一種代理，用戶不用知道買房的具體過(guò)程，而用戶應(yīng)該關(guān)心的是如何獲得滿意的結(jié)果，代理所需要做的事情就是完成這一買房的過(guò)程。

什么是Proxy

Proxy支持的攔截操作有許多中，目前只針對(duì)get(target, propKey, receiver)和set(target, propKey, value, receiver)來(lái)講。

• get方法：攔截對(duì)象屬性的讀取；
• set方法：攔截對(duì)象屬性的設(shè)置。

get(target, propKey, receiver)

定義一個(gè)Person對(duì)象，它將被Proxy代理，外界通Proxy實(shí)例對(duì)象來(lái)訪問(wèn)Person對(duì)象。

var person = {
    name: "kongsam",
    age: 21,
    hobbies: [
        "看動(dòng)漫",
        "騎行",
        "玩游戲"
    ]
}

實(shí)例化一個(gè)Proxy對(duì)象，用于攔截外界對(duì)Person對(duì)象的操作。

var proxy = new Proxy(person, {
    get: function (target, property) {
          // 打印target和property，查看里面到底是什么。
          console.log("target = ", target);
          console.log("property = ", property);
          // 判斷外界訪問(wèn)的對(duì)象屬性是否存在于目標(biāo)對(duì)象中。
          if (property in target) {
                return target[property];
          } else {
                // 如果外界訪問(wèn)的對(duì)象屬性不存在與目標(biāo)對(duì)象中，拋出異常。
                throw new ReferenceError('Property "' + property + '" 不存在。');
          }
    },
});

當(dāng)進(jìn)行proxy.name操作時(shí)，由于Person對(duì)象已經(jīng)被Proxy代理了，所以每當(dāng)我通過(guò)該P(yáng)roxy實(shí)例對(duì)象訪問(wèn)Person中存在的屬性時(shí)，都會(huì)調(diào)用get方法，get方法是攔截對(duì)象屬性的讀取的。

get: function (target, property) 中的兩個(gè)參數(shù)target和property分別接收到的信息如圖所示

通過(guò)該代理對(duì)象訪問(wèn)Person對(duì)象中存在的屬性不會(huì)出現(xiàn)任何異常，如果訪問(wèn)不存在的屬性會(huì)發(fā)生什么？

是什么，以至于訪問(wèn)不存在的屬性時(shí)，它會(huì)拋出異常呢？

這是因?yàn)橥饨鐚?duì)Person對(duì)象的訪問(wèn)都必須先通過(guò)Proxy設(shè)置的攔截層，而攔截層提供了一種機(jī)制可以對(duì)外界的訪問(wèn)進(jìn)行過(guò)濾和改寫。

// 判斷外界訪問(wèn)的對(duì)象屬性是否存在于目標(biāo)對(duì)象中。
if (property in target) {
    return target[property];
} else {
    // 如果外界訪問(wèn)的對(duì)象屬性不存在與目標(biāo)對(duì)象中，拋出異常。
    throw new ReferenceError('Property "' + property + '" 不存在。');
}

if語(yǔ)句就是攔截層的具體操作，即對(duì)外界的訪問(wèn)進(jìn)行過(guò)濾和改寫。如果沒(méi)有，訪問(wèn)不存在的屬性就會(huì)返回undefined。

set(target, propKey, value, receiver)

依舊是Person對(duì)象，這時(shí)我有個(gè)新需求，即修改age屬性時(shí)，值不能超過(guò)150且是整數(shù)。

新增Proxy對(duì)象中的set方法。

var proxy = new Proxy(person, {
    set: function (target, property, value) {
          // 打印target、property和value，查看里面到底是什么。
          console.log("target = ", target);
          console.log("property = ", property);
          console.log("value = ", value);
          if (property === "age") {
                if (!Number.isInteger(value)) {
                  throw new TypeError("age的值不是整數(shù)！");
                }
                if (value > 150) {
                  throw new RangeError("age的值不能大于150！");
                }
          }
    },
});

當(dāng)我執(zhí)行proxy.age = 100時(shí)，set的三個(gè)參數(shù)分別接收到的信息如下圖所示。

set方法用于攔截某個(gè)屬性的賦值操作，我如果對(duì)age的賦值操作不滿足條件時(shí)，會(huì)發(fā)生什么？

很明顯，會(huì)拋出異常。

總結(jié)

Proxy就是攔截層，你給出被攔截的對(duì)象，外界訪問(wèn)這個(gè)對(duì)象必須先通過(guò)攔截層，即訪問(wèn)Proxy的實(shí)例對(duì)象。通過(guò)Proxy為外界訪問(wèn)進(jìn)行過(guò)濾和改寫，如賦值時(shí)需滿足某些條件。

代理對(duì)象中還有許多的方法，如has、deleteProperty、ownKeys、getOwnPropertyDescriptor等，都是用于攔截不同的情況而出現(xiàn)的。

以上就是js Proxy的原理詳解的詳細(xì)內(nèi)容，更多關(guān)于js Proxy的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！