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] 的方式导致
 *    上下文混乱。
 ************************************************/