JS Proxy 代理

学习Proxy · 难度：高级 · +15XP

JavaScript Proxy —— 拦截对象的一切操作

Proxy可以拦截对象的基本操作——属性读取、赋值、函数调用、in操作符等13种行为。Vue 3的响应式系统就是用Proxy实现的。Proxy(target, handler)，target是被代理的对象，handler是拦截器。

基本用法

const user = { name: '小明', age: 18 };
const proxy = new Proxy(user, {
  get(obj, key) {
    console.log('读取了：' + key);
    return obj[key];
  },
  set(obj, key, value) {
    if (key === 'age' && value < 0) throw new Error('年龄不能为负');
    obj[key] = value;
    return true;
  }
});
proxy.name; // 控制台打印：读取了：name
proxy.age = -5; // 抛出Error！

13种拦截器

get、set、has、deleteProperty、apply、construct、getPrototypeOf、setPrototypeOf、isExtensible、preventExtensions、getOwnPropertyDescriptor、defineProperty、ownKeys。

动手练习

1. 基础练习：用Proxy给对象添加"访问日志"——每次属性被读取时记录时间戳。
2. 进阶应用：用Proxy实现数据验证——设置属性时自动校验类型。
3. 项目实战：用Proxy实现一个简化版Vue 3的reactive()函数。