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 提供了靈活的解決方案，無需修改原始物件即可實現高效的屬性處理和屬性內省。