196 - 代理与反射 - Proxy 对象 - Proxy 的基本概念

代理与反射 - Proxy 对象 - Proxy 的基本概念

在 JavaScript 的奇妙世界里，Proxy 对象是一个强大且实用的特性，它为开发者提供了一种拦截并自定义对象基本操作的机制。下面，我们将深入探讨 Proxy 对象的基本概念。

什么是 Proxy？

Proxy（代理）是 ES6 引入的一个新特性，它可以对目标对象的基本操作进行拦截和自定义处理。简单来说，Proxy 就像是目标对象的一个“代理人”，当外部代码试图访问或修改目标对象时，都会先经过这个“代理人”，由它来决定如何处理这些操作。

Proxy 的基本语法

创建一个 Proxy 对象需要使用 Proxy 构造函数，它接受两个参数：目标对象（target）和处理程序对象（handler）。语法如下：

const target = {
    message1: "hello",
    message2: "everyone"
};
const handler = {
    // 拦截属性读取操作
    get(target, prop) {
        return prop in target? target[prop] : `Property ${prop} does not exist.`;
    },
    // 拦截属性设置操作
    set(target, prop, value) {
        if (prop === 'message1') {
            target[prop] = value.toUpperCase();
        } else {
            target[prop] = value;
        }
        return true;
    }
};
const proxy = new Proxy(target, handler);
// 读取属性
console.log(proxy.message1); // 输出: hello
console.log(proxy.nonExistentProperty); // 输出: Property nonExistentProperty does not exist.
// 设置属性
proxy.message1 = "hi";
console.log(proxy.message1); // 输出: HI

在上述代码中，target 是我们要代理的目标对象，handler 是一个包含各种拦截方法的对象。这里我们使用了 get 和 set 方法来拦截属性的读取和设置操作。

Proxy 常用的拦截方法

Proxy 的应用场景

数据验证

在设置对象属性时，可以使用 set 拦截方法进行数据验证。例如：

const person = {
    age: 0
};
const personProxy = new Proxy(person, {
    set(target, prop, value) {
        if (prop === 'age') {
            if (typeof value!== 'number' || value < 0) {
                throw new Error('Age must be a non-negative number.');
            }
        }
        target[prop] = value;
        return true;
    }
});
try {
    personProxy.age = -1; // 抛出错误
} catch (error) {
    console.error(error.message); // 输出: Age must be a non-negative number.
}

私有属性模拟

可以使用 get 和 set 拦截方法来模拟私有属性。例如：

const privateData = new WeakMap();
class MyClass {
    constructor() {
        privateData.set(this, {
            secret: 'This is a secret.'
        });
    }
}
const myObject = new MyClass();
const myObjectProxy = new Proxy(myObject, {
    get(target, prop) {
        if (prop ==='secret') {
            return privateData.get(target)[prop];
        }
        return target[prop];
    },
    set(target, prop, value) {
        if (prop ==='secret') {
            privateData.get(target)[prop] = value;
        } else {
            target[prop] = value;
        }
        return true;
    }
});
console.log(myObjectProxy.secret); // 输出: This is a secret.

总结

Proxy 对象为 JavaScript 开发者提供了一种强大的元编程能力，通过拦截和自定义对象的基本操作，可以实现数据验证、私有属性模拟等多种功能。掌握 Proxy 的基本概念和常用拦截方法，将有助于我们编写更加灵活和健壮的代码。