JavaScript 中的物件是有用的資料類型，讓我們可以使用簡單的鍵值對定義複雜的數據，例如字典。有時，您可能想要更改 JavaScript 物件的預設工作方式。這就是代理對像有用的地方。在本文中，我們將討論什麼是代理物件、它們為何有用以及如何使用它們。
在了解什麼是代理對象之前，我們先來看看代理這個字。代理意味著行為類似於原始事物但不是原始事物的事物。同樣，代理對像是使用原始對象創建的對象，它可以攔截並更改原始對象的工作方式。
Proxy 建構子有兩個參數
目標：要為其建立代理的物件
處理程序：包含要變更或重新定義的操作的物件
const proxyObject = new Proxy(target, handler)
當我們使用具有您想要更改的操作的處理程序創建代理對象時，它會攔截這些操作，捕獲對目標對象的調用，並運行您為這些操作定義的自定義邏輯。
這些操作稱為陷阱，基本上是物件的內部方法。其中一些是：
取得
設定
刪除屬性
在這裡，我創建了一個簡單的視覺效果，展示了代理物件的工作原理。如果我們嘗試存取或設定一個值，它會攔截並執行處理程序中定義的操作（陷阱）。
好吧，我希望代理對象的內容和方式都清楚了。接下來，我們將討論一些用例來展示代理物件為何有用。
假設您想要建立一個系統，每次從物件存取屬性時，它都會記錄資訊。
const platform = {
type: "peerlist.io",
handle: "sachin87",
};
const proxyPlatformObj = new Proxy(platform, {
get(target, key) {
console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
return target[key];
},
});
// try to access the property
proxyPlatformObj.type;
// [Info]: Accessing type at 1729661722827
// 'peerlist.io'
這是一個非常簡單的用例，但在需要日誌記錄時很有用，並且您可以擴展它以執行更高級的操作。
我們也可以讓使用者存取不直接可用的屬性。例如，在上面的例子中，我們可能需要平台的完整 URL 以及使用者句柄。
const proxyPlatformObj = new Proxy(platform, {
get(target, key) {
console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
if (key === "url") {
return `https://${target.type}/${target.handle}`;
}
return target[key];
},
});
// try to access the url property
proxyPlatformObj.url;
// [Info]: Accessing url at 1729662118855
// 'https://peerlist.io/sachin87'
另一個用例是在添加值之前檢查該值。例如，假設我們要在設定句柄之前檢查它的值。我們將驗證兩個基本條件：
應該是小寫
可以是字母數字
const proxyObject = new Proxy(target, handler)
您可能想知道 Reflect.set(target, key, value) 是什麼。它是一個命名空間對象，具有靜態方法，用於呼叫可被攔截的 JavaScript 物件的內部方法。如果您不想驗證所有屬性，可以使用 Reflect 物件來保留預設行為。
我們討論了日誌記錄和驗證兩個用例，但您可以根據需要攔截其他內部方法。
我們討論了代理物件是什麼、它如何運作以及它的一些用途。代理對像很有幫助，但我們應該意識到它的缺點。我們應該僅在必要時使用它，以避免錯誤地增加複雜性或錯誤。
這就是本主題的全部內容。感謝您的閱讀！如果您覺得本文有幫助，請考慮按讚、留言並分享給其他人。
MDN 代理文件
MDN 反射文檔
以上是如何在 JavaScript 中使用代理對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！
