JavaScript Proxy拦截对象操作教程

JavaScript Proxy 是一个强大但有明确边界的元编程工具，它仅能拦截标准语言级操作（如属性读写、删除、in 检查、Object.keys 等），却无法捕获 JSON.stringify、Object.assign 等内置方法的底层行为，也无法干预 Date、RegExp 等内置对象依赖内部槽（internal slots）的关键逻辑——因为这些操作绕过属性访问机制，且方法调用时 this 绑定失效导致状态丢失；同时，Proxy 对数组 length 修改、非严格模式下的 set 返回值等细节存在易被忽视的陷阱，理解其能力边界与 trap 触发条件，远比盲目代理更重要。

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 拦不到它们的内部读写。例如：

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 包裹后，<code>getFullYear</code> 调用时 <code>this</code> 指向的是 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' 并做额外清理。

本篇关于《JavaScript Proxy拦截对象操作教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！