在 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 語法來實作解決方法。