JS 代理 Proxy
// 本代码由 AI 生成
/************************************************
* 定义一个原始对象 originalObj
* ----------------------------------------------
* - 这个对象包含一个字符串 name 与一个数字 age
************************************************/
const originalObj = {
name: "Alice",
age: 20,
};
/************************************************
* 使用 Proxy 包装 originalObj
* ----------------------------------------------
* - 参数1:目标对象 originalObj
* - 参数2:handler 对象,包含拦截器(trap)函数
************************************************/
const proxiedObj = new Proxy(originalObj, {
// get 捕捉器:当访问属性时,会执行此函数
get(target, property, receiver) {
// 这里可以添加想要的逻辑,如日志输出、权限判断等
console.log(`[Proxy GET] 正在读取属性:${String(property)}`);
// Reflect.get() 用于以正确的上下文获取属性值
return Reflect.get(target, property, receiver);
},
// set 捕捉器:当设置属性时,会执行此函数
set(target, property, value, receiver) {
console.log(`[Proxy SET] 正在修改属性:${String(property)} = ${value}`);
// 这里也可以添加额外的逻辑,例如验证数据类型
// 最后将修改应用到原始对象
return Reflect.set(target, property, value, receiver);
}
});
/************************************************
* 测试:读取与设置属性
* ----------------------------------------------
* - 下面的操作将触发 get / set 拦截器
************************************************/
console.log("读取 name 属性:", proxiedObj.name);
// 输出: [Proxy GET] 正在读取属性:name
proxiedObj.age = 25;
// 输出: [Proxy SET] 正在修改属性:age = 25
console.log("读取 age 属性:", proxiedObj.age);
// 输出: [Proxy GET] 正在读取属性:age
/************************************************
* 说明:
* 1. Proxy 可以帮助我们在对象操作前后添加自定义逻辑,
* 如:调试日志、权限控制、数据校验等。
* 2. handler 对象里可以定义各类拦截器(trap),常见
* 的包括 get、set、deleteProperty、has 等。
* 3. Reflect 是一个内置对象,可以帮助我们更规范地
* 完成对象操作(如 Reflect.get、Reflect.set),
* 避免手动使用 target[property] 的方式导致
* 上下文混乱。
************************************************/