JavaScript 代理可以为任何属性启用动态 Getter 和 Setter 吗？

在 JavaScript 中实现动态 Getter 和 Setter

问题：

虽然标准 JavaScript 允许创建 getter 和 setter对于特定属性，是否可以创建包罗万象的 getter 和 setter 来处理未显式定义的任何属性名称？

答案：

是的，JavaScript 支持动态ES2015 规范中通过使用代理引入了 getter 和 setter。代理创建拦截属性访问和修改的包装对象，从而允许自定义行为。

实现：

这是一个示例代理，它将字符串属性值转换为大写并返回“未定义属性缺少”：

<code class="js">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>

用法：

<code class="js">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 = missing"
original.example = "updated";
console.log(`original.example = ${original.example}`);  // "original.example = updated"
console.log(`proxy.example = ${proxy.example}`);        // "proxy.example = UPDATED"</code>

注意：

考虑代理支持跨浏览器兼容，所有主要现代浏览器都支持。

以上是JavaScript 代理可以为任何属性启用动态 Getter 和 Setter 吗？的详细内容。更多信息请关注PHP中文网其他相关文章！