動態 Getter 和 Setter 如何增強 JavaScript 的靈活性？

在 JavaScript 中實作動態 Getter 和 Setter：指南

在傳統 JavaScript 中，getter 和 setter 是為特定屬性名稱定義的。但是，可以使用 ES2015 中引入的代理程式建立更靈活的動態 getter 和 setter。

使用代理程式的動態 getter 和 setter

動態 getter 和 setter 允許在沒有明確定義的情況下存取和修改屬性。以下是如何使用代理實現它們：

<code class="js">"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";
      }
});</code>

用法範例

使用上述代理，可以動態執行屬性存取和修改：

<code class="js">console.log(`proxy.example = ${proxy.example}`); // "proxy.example = VALUE"
console.log(`proxy.unknown = ${proxy.unknown}`); // "proxy.unknown = missing"</code>

跨瀏覽器相容性

Chrome、Firefox 和Safari 等現代瀏覽器支援代理。但是，對於不支援代理程式的舊版瀏覽器，可以使用不含代理的動態 getter/setter 語法來實作解決方法。

以上是動態 Getter 和 Setter 如何增強 JavaScript 的靈活性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！