通俗易懂的JS之Proxy
- 2021 年 5 月 21 日
- 筆記
- javascript, 前端
與掘金文章同步，地址：//juejin.cn/post/6964398933229436935
什麼是代理模式
引入一個現實生活中的案例
我們作為用戶需要去如何評估一個房子的好壞、如何辦理住房手續等一些列繁瑣的事物嗎？顯然，用戶肯定不願意這樣做。用戶最關心的是結果，用戶對房子提出需求以及提供對等價值的金錢就可以獲得滿意的房子，這就是結果。
那麼誰為用戶去解決一系列繁瑣的買房過程呢？當然就是「房屋中介」了！房屋中介的作用就是在房地產開發經營與消費的供求市場中，為交易物體提供評估、交易、代理、諮詢等服務及善後服務的機構。
結合案例理解代理模式的定義
代理模式為其他對象提供一種代理以控制對這個對象的訪問。在某些情況下，一個對象不適合或者不能直接引用另一個對象，而代理對象可以在客戶端和目標對象之間起到中介的作用。
結合上邊的現實生活中的案例來理解這一段話，代理模式就是為其他用戶提供一種代理，不讓用戶知道買房的過程，而用戶應該關心的是如何獲得滿意的結果。代理所需要做的事情就是完成這一買房的過程。
什麼是Proxy
Proxy用於修改某些操作的默認行為，在目標對象前架設一個
「攔截」層，外界對該對象的訪問都必須先通過這一層攔截，因此提供了一種機制可以對外界的訪問進行過濾和改寫。——《ES6標準入門》- 第12章
Proxy支持的攔截操作有get(target, propKey, receiver)和set(target, propKey, value, receiver)，對於可以設置但沒有設置攔截的操作，則直接落在目標對象上，按照原先的方式產生結果。
- get實例方法：攔截對象屬性的讀取；
- set實例方法：攔截對象屬性的設置。
get(target, propKey, receiver)
定義一個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對象已經被該代理對象給代理了，並且該代理對象為person對象設置了一層攔截，就是所謂的攔截層，所以每當我通過該代理對象訪問person中存在的屬性時，都會調用get函數，因為get函數是攔截對象屬性的讀取的。
get: function (target, property) 中的兩個參數target和property分別接收到的信息如圖所示
上面說到，通過該代理對象訪問person中存在的屬性時，如果訪問不存在的屬性，會發生什麼？
我又是做了什麼樣的工作，才導致訪問不存在的屬性時，它會拋出異常呢？
因為外界對該對象的訪問都必須先通過一層攔截，而攔截的過程中提供了一種機制可以對外界的訪問進行過濾和改寫。
// 判斷外界訪問的對象屬性是否存在於目標對象中。
if (property in target) {
return target[property];
} else {
// 如果外界訪問的對象屬性不存在與目標對象中，拋出異常。
throw new ReferenceError('Property "' + property + '" 不存在。');
}
這裡的if語句判斷實際上就是我設置的一個機制，即對外界的訪問進行過濾和改寫。如果沒有這種機制，訪問不存在的屬性只會返回undefined。
set(target, propKey, value, receiver)
有get就有對應的set，依舊是上面的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的三個參數分別接收到的信息如下圖所示
set方法的作用是用於攔截某個屬性的賦值操作，那麼我如果對age的賦值操作不滿足我剛剛提出的新需求，會發生什麼？
很明顯，會拋出異常。
總結
Proxy 就是一個攔截層，你給出要代理的對象，外界訪問這個對象不是直接訪問他的，而是訪問這個Proxy的實例對象的。我們可以通過Proxy為外界訪問進行過濾和改寫，如賦值時需滿足某些條件。
代理對象中還有許多的方法，如has、deleteProperty、ownKeys、getOwnPropertyDescriptor、defineProperty等等。這些都是用於攔截的方法，針對於不同的情況而出現的。
