JavaScript 對象管家 Proxy
JavaScript 在 ES6 中，引入了一個新的對象類型 Proxy，它可以用來代理另一個對象，并可以在代理過程中攔截、覆蓋和定制對象的操作。Proxy 對象封裝另一個對象并充當中間人，其提供了一個捕捉器函數，可以在代理對象上攔截所有的操作，包括訪問屬性、賦值屬性、函數調用等等。通過攔截這些操作，可以對代理對象進行定制和控制。
在開始介紹 Proxy 對象前先了解 3 個術語：
target 目標對象：要代理的對象或函數。handler 處理程序：對代理的對象或函數執行某些操作的函數。traps 捕捉器：這些是一些用于處理目標的函數。單擊此處閱讀有關陷阱的更多信息。
語法
Proxy 對象的基本語法如下：
new Proxy(target, handler);
其中，target 是被代理的目標對象，handler 是一個對象，它包含了一些捕捉器函數，用來攔截代理對象的操作。
下面是一些常見的攔截操作和對應的捕捉器函數：
對象方法
getPrototypeOf()：Object.getPrototypeOf方法的捕捉器。setPrototypeOf()：Object.setPrototypeOf方法的捕捉器。isExtensible()：Object.isExtensible方法的捕捉器。preventExtensions()：Object.preventExtensions方法的捕捉器。getOwnPropertyDescriptor()：Object.getOwnPropertyDescriptor方法的捕捉器。handler.defineProperty()：Object.defineProperty方法的捕捉器。
屬性獲取器/設置器
get(target, propKey, receiver)：攔截對象的讀取屬性操作，返回屬性值。set(target, propKey, value, receiver)：攔截對象的設置屬性操作，返回一個布爾值表示是否設置成功。has(target, propKey)：攔截對象的in操作符，返回一個布爾值表示對象是否包含該屬性。deleteProperty(target, propKey)：攔截對象的delete操作符，返回一個布爾值表示是否刪除成功。ownKeys()：Object.getOwnPropertyNames方法和Object.getOwnPropertySymbols方法的捕捉器
函數方法
如果目標對象是一個函數，可以使用下面 2 個捕捉器。
apply(target, thisArg, args)：攔截函數的調用操作，返回調用結果。construct(target, args, newTarget)：攔截new操作符，返回一個對象。
Proxy 在目標對象周圍創建一個不可檢測的屏障，將所有操作重定向到處理程序對象。如果發送一個空的 handler ，代理只是原始對象的一個空包裝器。
const author = {
name: "Quintion",
age: 36,
};
const proxyAuthor = new Proxy(author, {});
console.log(author.name); // Quintion
console.log(proxyAuthor.name); // Quintion
為了賦予代理意義，需要向處理程序添加一些操作方法。
捕捉器
每當與一個對象交互時，都在調用一個內部方法。代理允許使用捕捉器攔截給定內部方法的執行。
因此，當運行 author.name 時，告訴 JavaScript 引擎調用內部 [[GET]] 方法來檢索 name 屬性。當運行 proxyAuthor.name 時，get 捕捉器會調用處理程序中定義的 get() 函數來執行，然后再將調用發送到原始對象。
get
get() 方法有兩個必需的參數：
target— 傳遞給代理的對象。property— 訪問的屬性的名稱。
要自定義代理，在處理程序對象上定義函數。下面定義了 get 方法來記錄訪問：
const handler = {
get(target, property) {
console.log(`捕捉器 GET:${property}`);
return target[property];
},
};
為了讓調用通過，捕捉器 get 返回 target[property]。使用方式如下：
const author = {
name: "Quintion",
age: 36,
};
const handler = {
get(target, property) {
console.log(`捕捉器 GET[${property}]`);
return target[property];
},
};
const proxyAuthor = new Proxy(author, handler);
console.log(proxyAuthor.name);
執行后，將打印以下內容：
捕捉器 GET[name]
Quintion
set
set 捕捉器用于給目標對象進行賦值操作，返回值是一個布爾值。set 捕捉器需要的參數如下：
target— 傳遞給代理的對象。property— 將被設置的屬性名或 Symbol。value— 新的屬性值receiver— 最初被調用的對象。
下面通過 set 捕捉器驗證年齡值的輸入：
const handler = {
set(target, property, value) {
if (property === "age" && typeof value !== "number") {
throw new TypeError("年齡必須是一個數字");
}
target[property] = value;
return true;
},
};
下面嘗試將錯誤的類型值賦值給 age ，則會拋出錯誤：
const proxyAuthor = new Proxy(author, handler);
proxyAuthor.age = "young";
// 執行后拋出異常：throw new TypeError("年齡必須是一個數字");
set()方法應該返回一個布爾值true用來表示賦值成功。 在嚴格模式下運行，并且返回一個假值或什么都不返回，則會拋出錯誤。
除了攔截對屬性的讀取和修改，Proxy 總共可以攔截 13 種操作。
應用場景
通過 Proxy 對象的特征，可以將其使用在下面這些場合：
驗證和過濾
代理Proxy 用于攔截和驗證對對象屬性的訪問。如，可以創建一個代理來檢查用戶輸入的數據是否符合預期的格式，并拒絕不正確的數據。就如下面 age 屬性賦值判斷
緩存
代理Proxy 用于緩存對象的操作結果，以避免重復計算。如，可以創建一個代理來攔截對象的某些方法，并將結果存儲在緩存中，以便將來使用。
下面是一個基于 Proxy 的緩存庫的示例：
class Cache {
constructor() {
this.cache = new Map();
this.proxy = new Proxy(this, {
get(target, property) {
if (property === "get") {
return (key) => {
return target.cache.get(key);
};
}
if (property === "set") {
return (key, value) => {
target.cache.set(key, value);
};
}
if (property === "has") {
return (key) => {
return target.cache.has(key);
};
}
if (property === "delete") {
return (key) => {
return target.cache.delete(key);
};
}
},
});
}
}
在上面的代碼中，定義了一個 Cache 類，該類中包含一個內部的 Map 對象用于存儲緩存數據，并且定義了一個 proxy 對象作為該類的代理。
在 proxy 對象的 get 方法中，根據傳入的屬性名返回相應的方法。如果屬性名為 get，則返回一個可以獲取緩存值的方法；如果屬性名為 set，則返回一個可以設置緩存值的方法；如果屬性名為 has，則返回一個可以判斷是否存在緩存值的方法；如果屬性名為 delete，則返回一個可以刪除緩存值的方法。
下面是一個使用該緩存庫的示例：
const cacheHelper = new Cache();
cacheHelper.set("foo", "bar");
console.log(cacheHelper.get("foo")); // "bar"
console.log(cacheHelper.has("foo")); // true
cacheHelper.delete("foo");
console.log(cacheHelper.get("foo")); // undefined
console.log(cacheHelper.has("foo")); // false
在上面的代碼中，創建了一個 Cache 對象，并調用其 set 方法設置緩存值，然后調用其 get 方法獲取緩存值，并調用其 has 方法判斷緩存值是否存在，最后調用其 delete 方法刪除緩存值。
監聽屬性變化
代理Proxy用于監視對象屬性的變化，并在屬性發生變化時觸發其他操作。如，創建一個代理來監視對象屬性的變化，并在屬性發生變化時更新頁面上的元素。
防止誤操作
代理Proxy用于防止誤操作，如，創建一個代理來攔截對象的某些方法，并在方法調用時檢查一些條件，以確保方法只在正確的上下文中調用。
虛擬化
代理Proxy可以用于創建虛擬化對象。如，創建一個代理對象，用于代替某個對象的真實實現，并且在實際對象執行之前，對其進行修改或攔截。
總結
上面介紹了如何使用代理Proxy對象來監視對象，通過使用處理程序對象中的捕捉器方法向它們添加自定義行為，提供更高級的對象操作和控制功能，從而增強代碼的可讀性和可維護性。