如何使用 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中文网其他相关文章！