首页  >  文章  >  web前端  >  JavaScript 代理可以为任何属性启用动态 Getter 和 Setter 吗?

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

Linda Hamilton
Linda Hamilton原创
2024-11-02 02:58:30386浏览

Can JavaScript Proxies Enable Dynamic Getters & Setters for Any Property?

在 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn