在 JavaScript 中實作動態(tài) Getter/Setter

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

PHP 中的動態(tài) Getter 和 Setter 功能

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

JavaScript 的救援代理

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

使用代理進(jìn)行動態(tài)Getters/Setter 的範(fàn)例

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

<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>

測試動態(tài)行為

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"

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

瀏覽器相容性

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

以上是如何使用 JavaScript 的代理物件來實作動態(tài) getter 和 setter？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！