探索 JavaScript 中的代理：帶有實際範例的高級功能

JavaScript 提供了許多有趣的功能，其中最強大且不太常見的功能之一是 Proxy 物件。該工具允許您建立一個可以攔截其他對像上的操作的對象，例如存取或修改屬性。在這篇文章中，我們將探討 Proxy 的工作原理、用途，以及它與 getter 和 setter 等其他類似功能的差異。

---

什麼是代理？

代理人充當另一個物件（稱為「目標」）的中介。您可以透過「處理程序」定義代理程式對於不同操作的行為方式。這允許您自訂與底層物件互動的方式。

---

基本文法

const target = {}; // The original object
const handler = { /* definitions of operations */ };
const proxy = new Proxy(target, handler);

---

用法1：攔截屬性訪問

假設我們有一個代表使用者的對象，並且我們希望在存取其屬性時提供自訂行為：

const user = {
    name: 'Gabriel',
    age: 30
};

const handler = {
    get: function(target, prop) {
        if (prop in target) {
            return target[prop];
        } else {
            return 'Property not found';
        }
    }
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Gabriel
console.log(userProxy.age); // 30
console.log(userProxy.email); // Property not found

您可以考慮使用 getter 來實現類似的行為：

const userWithGetters = {
    name: 'Gabriel',
    age: 30,
    getProperty(prop) {
        return this[prop] || 'Property not found';
    }
};

console.log(userWithGetters.getProperty('name')); // Gabriel
console.log(userWithGetters.getProperty('email')); // Property not found

不同的是，使用Proxy，你可以攔截對物件的任何操作，而不僅僅是屬性訪問，這提供了更大的靈活性。

---

用法2：屬性驗證

想像一下，我們想要確保在設定使用者的年齡時，只允許使用有效值。這就是 Proxy 的閃光點：

const person = {
    name: 'Ana'
};

const handler = {
    set: function(target, prop, value) {
        if (prop === 'age' && (value < 0 || value > 120)) {
            throw new Error('Age must be between 0 and 120');
        }
        target[prop] = value;
        return true;
    }
};

const personProxy = new Proxy(person, handler);

personProxy.name = 'María'; // Works fine
console.log(personProxy.name); // María

try {
    personProxy.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

您可以使用 setter 來驗證值：

const personWithSetters = {
    _age: 0,
    name: 'Ana',
    set age(value) {
        if (value < 0 || value > 120) {
            throw new Error('Age must be between 0 and 120');
        }
        this._age = value;
    },
    get age() {
        return this._age;
    }
};

try {
    personWithSetters.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

與 Proxy 的區別在於，您可以更廣泛地將驗證應用於任何屬性，而無需為每個屬性定義 getter 和 setter。

---

用法 3：監控變化

想像一下您想要追蹤對某個物件所做的更改。使用 Proxy，這很容易完成：

const data = {};

const handler = {
    set: function(target, prop, value) {
        console.log(`Changing ${prop} from ${target[prop]} to ${value}`);
        target[prop] = value;
        return true;
    }
};

const dataProxy = new Proxy(data, handler);

dataProxy.name = 'Pedro'; // Changing name from undefined to Pedro
dataProxy.age = 25; // Changing age from undefined to 25

在可觀察系統中，您需要定義特定模式來通知變更。使用Proxy，你只需攔截操作：

// Simulating a basic observable
class Observable {
    constructor(data) {
        this.data = data;
        this.listeners = [];
    }

    addListener(listener) {
        this.listeners.push(listener);
    }

    notify() {
        this.listeners.forEach(listener => listener(this.data));
    }
}

不同之處在於，使用代理允許採用更直接、更簡潔的方法來攔截和回應變更。使用 observable，您必須手動管理通知。

---

結論

JavaScript中的Proxy物件是一個極其強大的工具，它允許你攔截和重新定義對物件的操作。與限制性更強且需要更多程式碼的 getter 和 setter 不同，Proxy 提供了靈活性和更清晰的方法來驗證、監視和操作物件。

如果您希望增強在 JavaScript 中使用物件的能力，那麼探索 Proxy 絕對值得！

以上是探索 JavaScript 中的代理：帶有實際範例的高級功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！