探索 JavaScript 中的代理：带有实际示例的高级功能-js教程-PHP中文网

探索 JavaScript 中的代理：带有实际示例的高级功能

Patricia Arquette

发布： 2024-10-23 06:20:29

原创

625 人浏览过

Exploring Proxy in JavaScript: Advanced Functionality with Practical Examples

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，您必须手动管理通知。