Proxy是ES6提供的代理对象，通过new Proxy(target, handler)创建代理，拦截属性访问、赋值、函数调用等操作。例如：get陷阱可记录读取日志或返回默认值；set陷阱可用于数据验证与响应式更新；apply陷阱能监控函数调用参数与结果；has和deleteProperty可控制私有属性安全。实际中可用于实现自动认证请求拦截、AOP切面编程等。需注意仅能代理对象、存在性能开销及兼容性限制。结合Reflect可增强代理完整性。
JavaScript 中的代理模式通过 Proxy 构造函数实现，可以对对象的操作进行拦截和自定义处理。这种机制非常适合用来实现拦截器，比如在访问属性、修改属性、调用方法等操作前加入逻辑控制、日志记录、权限校验等。
什么是 Proxy 代理
Proxy 是 ES6 引入的一个内置对象，用于创建一个对象的代理，从而实现基本操作的拦截和自定义。语法如下：
const proxy = new Proxy(target, handler);target：要被代理的对象。
handler：一个对象，定义了代理的行为（即拦截器），比如 get、set、apply 等陷阱（traps）。
常见拦截操作示例
下面是一些常用的拦截方式及其应用场景：
1. 拦截属性读取（get）
立即学习“Java免费学习笔记（深入）”；
当访问对象属性时触发，可用于数据绑定、默认值返回、日志输出等。
const user = { name: 'Alice', age: 25 }; const proxyUser = new Proxy(user, { get(target, property) { console.log(`读取属性: ${property}`); return target[property] ?? '未知'; } }); console.log(proxyUser.name); // 输出：读取属性: name → Alice console.log(proxyUser.gender); // 输出：读取属性: gender → 未知2. 拦截属性设置（set）
当设置属性值时触发，适合做数据验证、更新视图、通知机制等。
const data = {}; const reactiveData = new Proxy(data, { set(target, property, value) { console.log(`设置属性 ${property} 为 ${value}`); target[property] = value; // 可在此处触发 UI 更新或事件通知 return true; } }); reactiveData.count = 1; // 输出：设置属性 count 为 1 reactiveData.count++; // 输出：设置属性 count 为 2
3. 拦截函数调用（apply）
适用于代理函数，可以在函数执行前后插入逻辑，如参数校验、耗时统计等。
function sum(a, b) { return a + b; } const trackedSum = new Proxy(sum, { apply(target, thisArg, args) { console.log('函数被调用，参数:', args); const result = target.apply(thisArg, args); console.log('结果:', result); return result; } }); trackedSum(2, 3); // 输出： // 函数被调用，参数: [2, 3] // 结果: 54. 拦截 in、deleteProperty 等操作
可以控制属性是否可枚举、可删除等。
const securedObj = { _secret: '私密信息', public: '公开信息' }; const secureProxy = new Proxy(securedObj, { has(target, prop) { if (prop.startsWith('_')) return false; return prop in target; }, deleteProperty(target, prop) { if (prop.startsWith('_')) { console.log('禁止删除私有属性'); return false; } delete target[prop]; return true; } }); console.log('_secret' in secureProxy); // false delete secureProxy._secret; // 输出：禁止删除私有属性实际应用：简易请求拦截器
可以用 Proxy 模拟一个 API 请求对象，在每次调用方法前自动添加认证头或日志记录。
const apiClient = { getUser(id) { return `用户 ${id} 的数据`; }, post(data) { return `提交数据: ${JSON.stringify(data)}`; } }; const authHeader = 'Bearer token123'; const interceptedApi = new Proxy(apiClient, { get(target, prop) { const originalMethod = target[prop]; if (typeof originalMethod === 'function') { return function(...args) { console.log(`[请求拦截] 调用 ${prop}, 参数:`, args); console.log(`[添加认证头] ${authHeader}`); return originalMethod.apply(this, args); }; } return originalMethod; } }); console.log(interceptedApi.getUser(1)); // 输出： // [请求拦截] 调用 getUser, 参数: [1] // [添加认证头] Bearer token123 // 用户 1 的数据这种方式可以作为轻量级 AOP（面向切面编程）实现，无需修改原始逻辑即可增强功能。
注意事项与局限性
使用 Proxy 时需要注意以下几点：
- 只能代理对象或函数，不能代理原始值（如字符串、数字）。
- 某些操作无法被完全拦截，例如绕过代理直接操作原对象。
- 性能开销存在，频繁操作大量属性时需评估影响。
- 部分浏览器兼容性需要考虑（现代浏览器普遍支持）。
基本上就这些。Proxy 提供了强大的元编程能力，合理使用可以让代码更灵活、可维护性更高。拦截器模式只是冰山一角，结合 Reflect 可以构建更完整的代理逻辑。不复杂但容易忽略细节。
