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