如何使用 JavaScript 的代理物件來實作動態 getter 和 setter？

在 JavaScript 中實作動態 Getter/Setter

了解如何在 JavaScript 中為預定義屬性建立 getter 和 setter 是一個常見概念。然而，擴展此功能以包含對任何未明確定義的屬性名稱的動態處理會帶來獨特的挑戰。

PHP 中的動態 Getter 和 Setter 功能

PHP 利用__get() 和 __set() 魔術方法可以動態定義任何屬性的 getter 和 setter 行為。這提供了一種方便且靈活的方法來動態操作屬性。

JavaScript 的救援代理

從 ES2015 開始，JavaScript 引入了代理，這是一個遊戲規則改變者動態 getter 和 setter 實現。代理允許建立充當其他對像外觀的對象，從而能夠攔截和修改屬性存取。

使用代理進行動態Getters/Setter 的範例

讓我們考慮以下範例，其中所有不存在的屬性值都會傳回“missing”，並且字串屬性值在擷取時會轉換為大寫：

<code class="javascript">"use strict";
if (typeof Proxy == "undefined") {
    throw new Error("This browser doesn't support Proxy");
}
let original = {
    example: "value",
};
let proxy = new Proxy(original, {
    get(target, name, receiver) {
        if (Reflect.has(target, name)) {
            let rv = Reflect.get(target, name, receiver);
            if (typeof rv === "string") {
                rv = rv.toUpperCase();
            }
            return rv;
        }
        return "missing";
      }
});</code>

測試動態行為

console.log(original.example = ${original.example}); // "original.example = value"
console.log(proxy.example = ${proxy.example}); // "proxy.example = VALUE"
console.log(proxy.unknown = ${ proxy.unknown}); // "proxy.unknown = 缺失"
original.example = "已更新";
console.log(original.example = ${original.example}); // "original .example = Updated"
console.log(proxy.example = ${proxy.example}); // "proxy.example = UPDATED"

如圖所示，代理攔截屬性存取並將定義的行為應用於不存在的屬性（“缺失”）和字串屬性（大寫轉換）。它還允許對原始物件進行修改，代理反映所做的更改。

瀏覽器相容性

所有主要現代瀏覽器都支援代理，包括 Chrome、Firefox 、Edge、Safari 和 Internet Explorer 11 。

以上是如何使用 JavaScript 的代理物件來實作動態 getter 和 setter？的詳細內容。更多資訊請關注PHP中文網其他相關文章！