JavaScript 代理程式能否為未定義的屬性建立動態 Getter 和 Setter？

JavaScript 中的動態Getter 和Setter

簡介：

JavaScript 提供了靈活的機制，透過🎜>

JavaScript 提供了靈活的機制，透過🎜>來存取和修改屬性設定器。雖然如何為預先確定的屬性名稱定義 getter 和 setter 是眾所周知的，但出現了一個問題：是否可以實現適用於未定義屬性名稱的動態 getter 和 setter？

動態 Getters使用代理的 Setters (ES6)：

從 ES2015 開始，JavaScript 引入了代理，它允許創建充當其他物件的「外觀」的物件。這可以攔截和修改屬性操作，包括 getter 和 setter。

範例：

<code class="javascript">"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);
            if (typeof rv === "string") {
                rv = rv.toUpperCase();
            }
            return rv;
        }
        return "missing";
    }
});

console.log(`original.example = ${original.example}`); // "original.example = value"
console.log(`proxy.example = ${proxy.example}`);       // "proxy.example = VALUE"
console.log(`proxy.unknown = ${proxy.unknown}`);       // "proxy.unknown = missing"
original.example = "updated";
console.log(`original.example = ${original.example}`); // "original.example = updated"
console.log(`proxy.example = ${proxy.example}`);       // "proxy.example = UPDATED"</code>

以下程式碼片段示範了使用代理程式的動態getter 和setter：

在此範例中：
• 原始物件包含一個值為「value」的屬性範例。
• 代理程式被建立為原始物件的外觀，具有get() 處理程序。
• get() 處理程序攔截屬性存取。如果該屬性在原始版本中存在，則傳回其值。如果未找到該屬性，則傳回「missing」。
• 如果存取的屬性值為字串，則將其轉換為大寫。
• 透過代理人修改屬性會反映在原始內容中。

建立代理程式後在原始檔案上定義的屬性也可以透過代理程式存取。

以上是JavaScript 代理程式能否為未定義的屬性建立動態 Getter 和 Setter？的詳細內容。更多資訊請關注PHP中文網其他相關文章！