JavaScriptProxy代理如何拦截对象操作【教程】

proxy 仅拦截明确的语言级操作（如 get/set/deleteProperty），无法捕获 date/regexp 等内置对象的内部槽访问，且 jsON.stringify、Object.assign 等不触发 trap；set 返回 false 在严格模式下静默失败，throw 则抛错；数组 Length 变更不触发 deleteProperty。

Proxy 不能拦截所有对象操作，关键看操作是否触发 get/set/deleteProperty 等 trap，且原始对象必须是可代理的（比如普通对象、数组），而 Date、RegExp、dom 元素等原生对象部分行为无法被完全捕获。

哪些操作能被 Proxy 拦截

Proxy 的 traps 只响应明确的 javaScript 语言级操作，不是“监听所有变化”。例如：

• obj.prop → 触发 get trap
• obj.prop = val → 触发 set trap（前提是该属性不是 writable: false）
• delete obj.prop → 触发 deleteProperty trap
• prop in obj → 触发 has trap
• Object.keys(obj) → 触发 ownKeys trap
• for (let k of obj)（若 obj 是数组或有 [symbol.iterator]）→ 可能触发 get 访问 Symbol.iterator

但 json.stringify(obj) 不会触发任何 trap——它只读取自有可枚举属性，绕过 Proxy 层；Object.assign({}, obj) 同理，它用的是内部 [[Get]]，仍走 get，但不触发 ownKeys 或 has，行为取决于目标对象的属性描述符。

为什么对 Date / RegExp / promise 代理后行为异常

这些内置对象的内部槽（internal slots，如 [[DateValue]]）无法通过常规属性访问，Proxy 的 traps 拦不到它们的内部读写。例如：

立即学习“Java免费学习笔记（深入）”；

const p = new Proxy(new Date(), {   get(target, prop) {     console.log('get', prop);     return Reflect.get(target, prop);   } }); p.getTime(); // 输出 'get getTime'，正常 p.toString(); // 输出 'get toString'，也正常 p.getFullYear(); // 输出 'get getFullYear'，但返回 NaN —— 因为 Date 方法依赖内部状态，而 Proxy 包裹后，getFullYear 调用时 this 指向的是 proxy 实例，不是原始 Date 对象，导致内部槽不可达

根本原因：Reflect.apply 或方法调用中，this 绑定失效。修复方式只能是显式绑定：target.getFullYear.call(target)，但这要求你知道哪些方法需要特殊处理。

set trap 中 return false 和 throw 的区别

在严格模式下，set trap 返回 false 会静默失败（不报错，赋值无效）；而 throw 会抛出 TypeError。但注意：

• 非严格模式下，return false 会被忽略，赋值依然成功（这是历史遗留行为）
• 现代代码几乎都运行在严格模式（模块、类、箭头函数等默认启用），所以 return false 是安全的静默拦截方式
• 如果想让使用者感知拦截，应 throw new Error('xxx')，否则调试时容易误以为“没生效”
• 不要在 set 里直接 target[key] = value 后再 return true——这会跳过原型链上的 setter，正确做法是 Reflect.set(target, key, value, receiver)，其中 receiver 保证 setter 正确触发

常见陷阱：代理后的数组 length 变更不触发 set

数组的 length 属性是数据属性，但修改它可能间接删除元素。例如：

const arr = [1, 2, 3]; const p = new Proxy(arr, {   set(target, prop, value) {     console.log('set', prop, value);     return Reflect.set(target, prop, value);   } }); p.length = 1; // 输出 'set length 1'，但不会触发对索引 '2'、'1' 的 deleteProperty

也就是说：length 缩小时，被删掉的索引项不会经过 deleteProperty trap，也不会触发 set。这是 ES 规范定义的行为，Proxy 无法改变。若需响应“数组变短”，只能在 set 中手动检测 prop === 'length' 并做额外清理。