JavaScript 可以实现动态 Getters/Setters 吗？

动态 getters 和 setters 允许 JavaScript 对象处理超出预定义属性的属性访问和修改。虽然早期的 JavaScript 技术对已知属性使用特定的 getter 和 setter，但本文探讨了为任何未定义的属性实现包罗万象的 getter 和 setter 的可能性。

ES2015 代理：动态解决方案

ES2015 引入了 JavaScript 代理，它可以创建充当其他对象中介的对象。此功能开启了动态 getter 和 setter：

const original = {
    example: "value",
};
const 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";
    },
});

console.log(`proxy.example = ${proxy.example}`); // "proxy.example = VALUE"
console.log(`proxy.unknown = ${proxy.unknown}`); // "proxy.unknown = missing"

在此示例中，代理对象拦截原始对象的属性访问。当访问字符串属性时，代理将其转换为大写并返回；对于未知属性，它返回“缺失”而不是未定义。

如果浏览器支持 ES2015 (ES6)，则此实现是跨浏览器兼容的。对于较旧的浏览器，请考虑使用 polyfill 或替代技术。代理为动态 getter 和 setter 提供了灵活的解决方案，无需修改原始对象即可实现高效的属性处理和属性内省。