在 JavaScript 中实现动态 Getter 和 Setter：指南

在传统 JavaScript 中，getter 和 setter 是为特定属性名称定义的。但是，可以使用 ES2015 中引入的代理创建更灵活的动态 getter 和 setter。

使用代理的动态 getter 和 setter

动态 getter 和 setter 允许在没有显式定义的情况下进行属性访问和修改。以下是如何使用代理来实现它们：

"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);
            // Modify the value here before returning
            return rv;
        }
        // Define default behavior for unknown properties
        return "missing";
      }
});

用法示例

有了上面的代理，就可以动态地进行属性访问和修改了：

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

跨浏览器兼容性

Chrome、Firefox 和 Safari 等现代浏览器支持代理。但是，对于不支持代理的旧版浏览器，可以使用不带代理的动态 getter/setter 语法来实现解决方法。