如何在 JavaScript 中使用代理對象

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中文網其他相關文章！