Proxy 与 Reflect 必须协同工作,因 Reflect 提供带 receiver 的标准操作以正确处理访问器、原型链和私有字段;Object.defineProperty 无法监听动态属性或数组索引,而 Proxy 可拦截 13 种操作;Reflect 方法返回布尔值而非抛错,更利于防御性编程。

Proxy 是用来拦截对象操作的“中间层”,Reflect 是它默认行为的“标准实现”——二者不是可选搭配,而是必须协同工作的底层机制。
为什么 set/get 拦截里一定要用 Reflect.set() 和 Reflect.get()
直接写 target[prop] = value 或 target[prop] 看似省事,但会绕过三类关键语义:
- 访问器(getter/setter)里的
this指向错误:不传receiver,this会指向原始target,而非代理对象,导致this._name读写错位 - 原型链查找失效:比如
obj.toString()可能查不到Object.prototype上的方法 - 私有字段(
#field)直接报错:target[prop]不支持私有字段访问,而Reflect.get(target, prop, receiver)支持
正确写法始终带 receiver 参数:
const handler = {
get(target, prop, receiver) {
console.log('get', prop);
return Reflect.get(target, prop, receiver); // ✅
},
set(target, prop, value, receiver) {
console.log('set', prop, value);
return Reflect.set(target, prop, value, receiver); // ✅
}
};
Proxy 能拦什么,Object.defineProperty 为什么不够用
常见误区是拿 Object.defineProperty 去做响应式或校验,但它只能监听「已存在」的属性;而真实场景中,用户随时可能 obj.newKey = 1 或 delete obj.x。
-
Proxy可拦截 13 种操作,包括ownKeys(影响for...in、Object.keys)、has(影响'x' in obj)、deleteProperty、construct(new调用)等 -
Object.defineProperty对数组索引赋值(arr[0] = 'x')完全无反应;Proxy的settrap 可捕获 - 无法监听新增属性:给一个空对象加属性,
Object.defineProperty根本没机会介入
哪些场景非用 Proxy + Reflect 不可
这不是炫技工具,而是解决特定工程问题的最小可行方案:
立即学习“Java免费学习笔记(深入)”;
-
响应式系统:Vue 3 的
reactive()就靠它实现依赖自动收集与触发,get拦截时记录副作用,set时批量通知更新 -
运行时类型校验:在
set中检查value类型,但赋值动作仍交由Reflect.set()执行,确保描述符(如writable: false)不失效 -
只读/不可变封装:拦截
set、deleteProperty、defineProperty、preventExtensions全部可变入口,统一返回false或抛错 -
调试代理:所有操作前打日志、记录调用栈(
console.trace()),不影响原逻辑执行路径
Reflect 方法返回值和错误处理很特别
它不抛异常,而是用布尔值表示成败,这对防御性编程更友好:
-
Reflect.deleteProperty(obj, 'x')返回true/false,而delete obj.x在严格模式下删不可配置属性会直接报错 -
Reflect.has(obj, 'x')对null或undefined安全,'x' in null则抛TypeError -
Reflect.construct()是唯一能指定new.target的方式,用于继承内置类(如class MyArray extends Array)
真正难的不是写第一个 Proxy,而是意识到:只要涉及动态属性、原型链、访问器、私有字段或跨框架集成,就绕不开 receiver 和 Reflect 的组合。漏掉任何一个,都可能在某个边界 case 里静默失败。











