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

探索JavaScript Proxy对象的强大功能，学习如何使用处理器对象拦截属性访问、赋值、函数调用等操作。 · 难度：入门 · +15XP

Proxy 基础

Proxy对象允许你创建一个对象的代理，从而可以拦截并自定义该对象的基本操作（如属性查找、赋值、枚举、函数调用等）。

创建Proxy

const target = { message: 'Hello' };
const handler = {
  get: function(obj, prop) {
    if (prop === 'message') {
      return obj[prop] + ' World';
    }
    return obj[prop];
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.message); // 'Hello World'

常用陷阱方法

实际应用：验证与防护

const user = { age: 25 };
const validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (typeof value !== 'number' || value < 0) {
        throw new TypeError('Age must be a positive number');
      }
    }
    obj[prop] = value;
    return true;
  }
};
const proxyUser = new Proxy(user, validator);
proxyUser.age = 30; // 成功
// proxyUser.age = -5; // 抛出错误

可撤销Proxy

使用Proxy.revocable可以创建一个可撤销的代理，一旦撤销，代理将无法使用。

const { proxy, revoke } = Proxy.revocable({}, {
  get: () => 'intercepted'
});
console.log(proxy.foo); // 'intercepted'
revoke();
// console.log(proxy.foo); // TypeError

练习提示

在starter_code中，创建一个Proxy来拦截set操作，确保score属性只能在0到100之间，并记录所有属性访问的日志。