通俗易懂的JS之Proxy

kongsam發表於2021-05-21
JS

與掘金文章同步，地址：https://juejin.cn/post/6964398933229436935

什麼是代理模式

引入一個現實生活中的案例

我們作為使用者需要去如何評估一個房子的好壞、如何辦理住房手續等一些列繁瑣的事物嗎？顯然，使用者肯定不願意這樣做。使用者最關心的是結果，使用者對房子提出需求以及提供對等價值的金錢就可以獲得滿意的房子，這就是結果。

那麼誰為使用者去解決一系列繁瑣的買房過程呢？當然就是“房屋中介”了！房屋中介的作用就是在房地產開發經營與消費的供求市場中，為交易物體提供評估、交易、代理、諮詢等服務及善後服務的機構。

結合案例理解代理模式的定義

在某些情況下，一個物件不適合或者不能直接引用另一個物件，而代理物件可以在客戶端和目標物件之間起到中介的作用。

代理模式就是為其他使用者提供一種代理，使用者不用知道買房的具體過程，而使用者應該關心的是如何獲得滿意的結果，代理所需要做的事情就是完成這一買房的過程。

什麼是Proxy

Proxy用於修改某些操作的預設行為，在目標物件前架設一個“攔截”層，外界對該物件的訪問都必須先通過這一層攔截，因此提供了一種機制可以對外界的訪問進行過濾和改寫。——《ES6標準入門》- 第12章

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

  1. get方法：攔截物件屬性的讀取；
  2. set方法：攔截物件屬性的設定。

get(target, propKey, receiver)

定義一個Person物件，它將被Proxy代理，外界通Proxy例項物件來訪問Person物件。

var person = {
    name: "kongsam",
    age: 21,
    hobbies: [
        "看動漫",
        "騎行",
        "玩遊戲"
    ]
}

例項化一個Proxy物件，用於攔截外界對Person物件的操作。

var proxy = new Proxy(person, {
    get: function (target, property) {
          // 列印target和property，檢視裡面到底是什麼。
          console.log("target = ", target);
          console.log("property = ", property);
          // 判斷外界訪問的物件屬性是否存在於目標物件中。
          if (property in target) {
                return target[property];
          } else {
                // 如果外界訪問的物件屬性不存在與目標物件中，丟擲異常。
                throw new ReferenceError('Property "' + property + '" 不存在。');
          }
    },
});

當進行proxy.name操作時，由於Person物件已經被Proxy代理了，所以每當我通過該Proxy例項物件訪問Person中存在的屬性時，都會呼叫get方法，get方法是攔截物件屬性的讀取的。

get: function (target, property) 中的兩個引數target和property分別接收到的資訊如圖所示

image.png

通過該代理物件訪問Person物件中存在的屬性不會出現任何異常，如果訪問不存在的屬性會發生什麼？

image.png

是什麼，以至於訪問不存在的屬性時，它會丟擲異常呢？

這是因為外界對Person物件的訪問都必須先通過Proxy設定的攔截層，而攔截層提供了一種機制可以對外界的訪問進行過濾和改寫。

// 判斷外界訪問的物件屬性是否存在於目標物件中。
if (property in target) {
    return target[property];
} else {
    // 如果外界訪問的物件屬性不存在與目標物件中，丟擲異常。
    throw new ReferenceError('Property "' + property + '" 不存在。');
}

if語句就是攔截層的具體操作，即對外界的訪問進行過濾和改寫。如果沒有，訪問不存在的屬性就會返回undefined。

image.png

set(target, propKey, value, receiver)

依舊是Person物件，這時我有個新需求，即修改age屬性時，值不能超過150且是整數。

新增Proxy物件中的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的值不是整數！");
                }
                if (value > 150) {
                  throw new RangeError("age的值不能大於150！");
                }
          }
    },
});

當我執行proxy.age = 100時，set的三個引數分別接收到的資訊如下圖所示。

image.png

set方法用於攔截某個屬性的賦值操作，我如果對age的賦值操作不滿足條件時，會發生什麼？

image.png

很明顯，會丟擲異常。

總結

Proxy就是攔截層，你給出被攔截的物件，外界訪問這個物件必須先通過攔截層，即訪問Proxy的例項物件。通過Proxy為外界訪問進行過濾和改寫，如賦值時需滿足某些條件。

代理物件中還有許多的方法，如has、deleteProperty、ownKeys、getOwnPropertyDescriptor等，都是用於攔截不同的情況而出現的。

相關文章