JavaScript 提供了許多有趣的功能，其中最強(qiáng)大且不太常見(jiàn)的功能之一是 Proxy 對(duì)象。該工具允許您創(chuàng)建一個(gè)可以攔截其他對(duì)象上的操作的對(duì)象，例如訪(fǎng)問(wèn)或修改屬性。在這篇文章中，我們將探討 Proxy 的工作原理、用途，以及它與 getter 和 setter 等其他類(lèi)似功能的區(qū)別。

---

什么是代理？

代理充當(dāng)另一個(gè)對(duì)象（稱(chēng)為“目標(biāo)”）的中介。您可以通過(guò)“處理程序”定義代理對(duì)于不同操作的行為方式。這允許您自定義與底層對(duì)象交互的方式。

---

基本語(yǔ)法

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

---

用法1：攔截屬性訪(fǎng)問(wèn)

假設(shè)我們有一個(gè)代表用戶(hù)的對(duì)象，并且我們希望在訪(fǎng)問(wèn)其屬性時(shí)提供自定義行為：

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 來(lái)實(shí)現(xiàn)類(lèi)似的行為：

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，你可以攔截對(duì)對(duì)象的任何操作，而不僅僅是屬性訪(fǎng)問(wèn)，這提供了更大的靈活性。

---

用法2：屬性驗(yàn)證

想象一下，我們想要確保在設(shè)置用戶(hù)的年齡時(shí)，只允許使用有效值。這就是 Proxy 的閃光點(diǎn)：

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 來(lái)驗(yàn)證值：

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 的區(qū)別在于，您可以更廣泛地將驗(yàn)證應(yīng)用于任何屬性，而無(wú)需為每個(gè)屬性定義 getter 和 setter。

---

用法 3：監(jiān)控變化

想象一下您想要跟蹤對(duì)某個(gè)對(duì)象所做的更改。使用 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

在可觀(guān)察系統(tǒng)中，您需要定義特定模式來(lái)通知更改。使用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));
    }
}

不同之處在于，使用代理允許采用更直接、更簡(jiǎn)潔的方法來(lái)攔截和響應(yīng)更改。使用 observable，您必須手動(dòng)管理通知。

---

結(jié)論

JavaScript中的Proxy對(duì)象是一個(gè)極其強(qiáng)大的工具，它允許你攔截和重新定義對(duì)對(duì)象的操作。與限制性更強(qiáng)且需要更多代碼的 getter 和 setter 不同，Proxy 提供了靈活性和更清晰的方法來(lái)驗(yàn)證、監(jiān)視和操作對(duì)象。

如果您希望增強(qiáng)在 JavaScript 中使用對(duì)象的能力，那么探索 Proxy 絕對(duì)值得！

以上是探索 JavaScript 中的代理：帶有實(shí)際示例的高級(jí)功能的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！