JS Proxy 代理对象：拦截与自定义行为

探索 JavaScript Proxy 对象，学会拦截对象的读取、赋值、函数调用等操作，实现数据验证和日志记录。 · 难度：入门 · +15XP

认识 Proxy

Proxy 是 ES6 提供的一种元编程机制，允许你创建一个对象的代理，从而拦截并自定义基本操作（如属性读取、赋值、枚举、函数调用等）。

基本语法

const proxy = new Proxy(target, handler);

target 是被代理的目标对象，handler 是一个包含“陷阱”（trap）方法的对象。

常用陷阱方法

示例：数据验证

const validator = {
  set(target, prop, value) {
    if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
      throw new Error('年龄必须为非负数字');
    }
    target[prop] = value;
    return true;
  }
};
const person = new Proxy({}, validator);
person.age = 25;  // 正常
person.age = -5;  // 抛出错误

示例：日志记录

const logger = {
  get(target, prop) {
    console.log(读取属性: ${prop});
    return target[prop];
  },
  set(target, prop, value) {
    console.log(设置属性: ${prop} = ${value});
    target[prop] = value;
    return true;
  }
};

const obj = new Proxy({ name: 'Alice' }, logger);
console.log(obj.name); // 控制台输出: 读取属性: name
obj.name = 'Bob';      // 控制台输出: 设置属性: name = Bob

练习提示

右侧代码中，我们有一个用户对象。请创建一个 Proxy，当读取 password 属性时，返回 '***' 而非真实值，当设置 age 属性时，确保值在 0-120 之间，否则抛出错误。