JavaScript代理是什么_它如何拦截对象操作_技术教程

Proxy是独立包装层而非语法糖，通过target和handler构造新对象，所有操作必经拦截逻辑，不修改原对象且与原对象引用不同。

JavaScript 代理（Proxy）不是语法糖，也不是对象的“增强版”，它是一个独立的包装层——你无法绕过它直接访问原始对象，所有操作都必须经过它定义的拦截逻辑。

什么是 `Proxy`？它和普通对象有什么本质区别

Proxy 是一个构造函数，接收两个参数：target（被代理的目标对象）和 handler（包含拦截方法的对象）。它返回一个新对象，这个对象在行为上可以完全不同于 target，但内存中仍指向同一份数据（除非你在拦截器里刻意复制）。

关键点在于：它不修改原对象，也不继承原对象；它是“中间人”，所有读写、枚举、构造等行为都可被重定向或拒绝。

target 可以是普通对象、数组、函数，甚至是 null（但多数 trap 会报错）
handler 中未定义的 trap（如没写 get），对应操作会自动转发给 target
代理对象和原对象是两个独立引用，proxy === target 为 false

`get` 和 `set` 是最常用拦截，但它们的参数和返回值有隐含约束

get(target, prop, receiver) 的第三个参数 receiver 很容易被忽略——它是触发本次 get 的对象（通常是 proxy 本身），用于正确处理 this 绑定，尤其在访问 getter 或原型链时至关重要。

set(target, prop, value, receiver) 必须显式返回 true 才算赋值成功；返回 false 或抛出错误都会导致静默失败或 TypeError（严格模式下）。

const obj = { a: 1 };
const proxy = new Proxy(obj, {
  get(target, prop, receiver) {
    console.log(`读取 ${prop}，this 指向`, receiver === proxy); // true
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    if (prop === 'a' && typeof value !== 'number') {
      throw new TypeError('a 必须是数字');
    }
    return Reflect.set(target, prop, value, receiver); // 必须返回布尔值
  }
});

哪些操作不能被 `Proxy` 拦截？常见“失效”场景有哪些

Proxy 无法拦截以下行为，这是语言层面的限制：

对象自有属性的存在性检测：prop in proxy 不触发 has trap，除非该属性不在 target 上且 handler.has 已定义
for…in 循环只拦截 ownKeys 和 getOwnPropertyDescriptor，但不会拦截原型链上的可枚举属性遍历
Object.keys()、Object.getOwnPropertyNames() 等反射 API 只受 ownKeys 影响，但不会触发 get
数组的 length 赋值、稀疏数组索引设置（如 arr[100] = 1）可能绕过 set，取决于引擎实现（V8 中已基本覆盖，但旧版本有例外）
proxy.toString() 这类内置方法调用，走的是 [[ToString]] 内部协议，不经过 get

性能与调试：为什么过度使用 `Proxy` 会让代码变慢且难排查

每次属性访问都多一层函数调用 + Reflect 转发，V8 引擎很难对代理对象做内联优化。更隐蔽的问题是调试体验：

Chrome DevTools 显示 Proxy 对象时默认只展开 [[Handler]] 和 [[Target]]，不显示实际属性值
断点打在 get 里，但调用栈可能来自框架内部（比如 Vue 的响应式系统），看不出原始业务代码在哪触发了访问
JSON.stringify(proxy) 会尝试遍历所有可枚举属性，若 ownKeys 返回空数组或漏掉 key，结果可能是 {} —— 这种 bug 很难一眼发现

真正需要代理的场景其实很窄：实现不可变数据结构、运行时字段校验、API 请求代理、测试桩（mock）、或是构建响应式系统底层。日常对象封装，请优先用 class + #private 或 Object.freeze。