Zhonghui

每个不曾起舞的日子,都是对生命的辜负

User Tools

Site Tools


程序:javascript:代理

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] 的方式导致
 *    上下文混乱。
 ************************************************/
/var/www/DokuWikiStick/dokuwiki/data/pages/程序/javascript/代理.txt · Last modified: 2025/03/04 10:00 by zhonghui