在 JavaScript 中實(shí)現(xiàn)動(dòng)態(tài) Getter/Setter

了解如何在 JavaScript 中為預(yù)定義屬性創(chuàng)建 getter 和 setter 是一個(gè)常見(jiàn)概念。然而，擴(kuò)展此功能以包含對(duì)任何未顯式定義的屬性名稱(chēng)的動(dòng)態(tài)處理會(huì)帶來(lái)獨(dú)特的挑戰(zhàn)。

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

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

JavaScript 的救援代理

從 ES2015 開(kāi)始，JavaScript 引入了代理，這是一個(gè)游戲規(guī)則改變者動(dòng)態(tài) getter 和 setter 實(shí)現(xiàn)。代理允許創(chuàng)建充當(dāng)其他對(duì)象外觀的對(duì)象，從而能夠攔截和修改屬性訪(fǎng)問(wèn)。

使用代理進(jìn)行動(dòng)態(tài) Getters/Setter 的示例

讓我們考慮以下示例，其中所有不存在的屬性值都將返回“missing”，并且字符串屬性值將轉(zhuǎn)換為大寫(xiě)檢索：

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

測(cè)試動(dòng)態(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"

如所示，代理攔截屬性訪(fǎng)問(wèn)并將定義的行為應(yīng)用于不存在的屬性（“缺失”）和字符串屬性（大寫(xiě)轉(zhuǎn)換）。它還允許對(duì)原始對(duì)象進(jìn)行修改，代理反映所做的更改。

瀏覽器兼容性

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

以上是如何使用 JavaScript 的代理對(duì)象來(lái)實(shí)現(xiàn)動(dòng)態(tài) getter 和 setter？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！