约 10 分钟6 张卡

Proxy 与 Reflect

Proxy 创建一个代理对象，让代码能够拦截经过它的属性读取、赋值、删除和列键等操作。Reflect 提供与这些对象操作对应的方法，适合在拦截后继续执行原有语义。代理是新的对象，直接访问原目标不会自动经过代理。

两者一起使用时，重点是保留接收者、正确报告操作结果，并遵守目标对象不可配置属性等约束。它们提供响应式、校验和访问控制的基础能力，但不会自动完成依赖管理，也不是任意对象的透明包装器。

1. 面试核心

先记住这几条，再读正文

Proxy 拦截的是经过代理对象的操作，不是给原对象安装一套无处不在的监听器。代理与目标具有不同身份，嵌套对象也不会自动变成代理。卡 · 代理与对象操作
get、set、has、deleteProperty、ownKeys 等处理不同操作。属性赋值与属性定义不是同一入口，只实现 set 不等于能记录所有变化。卡 · 读取与写入拦截
Reflect.get/Reflect.set 的 receiver 关系到访问器的 this 和最终写入位置。默认转发时保留 receiver，才能保留继承与访问器语义。卡 · receiver 与 getter
set 等拦截器要正确报告成功或失败。返回 true 不等于已经写入，返回 false 在严格模式赋值中会导致异常。卡 · 读取与写入拦截
Proxy 不能任意伪造目标状态。不可配置属性、不可扩展对象等约束仍然要成立，违背不变量会抛 TypeError。卡 · 代理不变量
Map 内部状态和类私有字段不会复制到代理上。改变接收者来适配特殊对象，是明确的语义选择，不能当作所有代理的通用修复。卡 · 内置对象与私有字段

2. 代理与对象操作

卡 · Proxy 能拦截哪些操作，原对象与嵌套对象会自动受到拦截吗？

new Proxy(target, handler) 接收目标对象和处理器对象。处理器里的拦截函数也称 trap，它们在对应操作发生时执行；未定义的拦截通常转发给目标。

外部操作	对应的主要拦截器	说明
`proxy.key`	`get`	读取属性
`proxy.key = value`	`set`	赋值，可能继续涉及属性定义
`"key" in proxy`	`has`	判断属性存在性
`delete proxy.key`	`deleteProperty`	删除自有属性
`Reflect.ownKeys(proxy)`	`ownKeys`	列出全部自有键
`Object.defineProperty(proxy, key, descriptor)`	`defineProperty`	定义或调整自有属性
`proxy(...args)` / `new proxy(...args)`	`apply` / `construct`	目标本身还必须具有调用或构造能力

一个高层操作可能触发多个拦截器。例如 Object.keys 不只需要键列表，还会检查属性是否可枚举；不能简单把每个 API 和某个 trap 一一等同。

const target = { count: 1 };
const seen = [];
const proxy = new Proxy(target, {
  get(target, key, receiver) {
    seen.push(key);
    return Reflect.get(target, key, receiver);
  },
});

console.log(proxy.count); // 1
console.log(target.count); // 1
console.log(seen); // ["count"]
console.log(proxy === target); // false

读取 target.count 没有经过代理，因此没有第二条记录。引用相等、Map 键和 WeakMap 键都会区分 proxy 与 target。需要稳定身份的系统，通常要维护“同一目标返回同一代理”的缓存，而不是每次读取都创建一个新代理。

3. Reflect 与默认转发

卡 · 怎样用 Proxy 实现属性读写拦截，并在写入时校验值？卡 · 为什么 Reflect.get 和 Reflect.set 转发时需要保留 receiver？

Reflect 把对象内部操作暴露为普通函数。它不是只能配合 Proxy 使用，也不是让操作“跳过代理”的特殊通道：把代理作为 Reflect 的目标，仍然会触发对应拦截。

在 get 中读取 receiver[key]，可能再次进入同一个 get，形成递归；常见的默认转发方式是 Reflect.get(target, key, receiver)，目标使用传入的 target，接收者保持 receiver。

3.1 receiver 与 getter

Reflect.get(target, key, receiver) 沿 target 查找属性；如果遇到 getter，则以 receiver 作为 getter 的 this。直接写 target[key] 会让接收者变成 target，可能绕开代理里的其他读取。

const target = {
  name: "Lin",
  get label() { return this.name; },
};
const keys = [];
const proxy = new Proxy(target, {
  get(target, key, receiver) {
    keys.push(key);
    return Reflect.get(target, key, receiver);
  },
});

console.log(proxy.label); // Lin
console.log(keys);        // ["label", "name"]

读取 label 后，getter 的 this 是 proxy，所以 this.name 再次经过代理。如果改成 return target[key]，getter 中的 this 就是原对象，name 的读取不会经过该代理。这会影响基于读取记录依赖的系统。

3.2 receiver 与 setter、继承赋值

Reflect.set 也保留赋值时的接收者。它会按目标及其原型上的描述符决定如何写入：遇到 setter 时以 receiver 调用；按数据属性规则建立属性时，通常写到接收者上。

const base = { count: 1 };
const child = Object.create(base);
console.log(Reflect.set(base, "count", 2, child)); // true
console.log(base.count, child.count);             // 1 2
console.log(Object.hasOwn(child, "count"));        // true

这个例子解释了为什么不能总把 target[key] = value 当成等价转发：它会直接修改 base，而正确保留接收者时，赋值在 child 上建立自有属性。写入是否成功仍受可写性、setter 和可扩展性限制。

4. 读取与写入拦截

卡 · 怎样用 Proxy 实现属性读写拦截，并在写入时校验值？卡 · set 拦截器返回 true 或 false 分别意味着什么？

对于简单校验，可以在 set 中检查输入，再把操作转发给目标。下面只校验通过赋值入口设置的 score，其他写入入口不在这个示例的承诺范围内。

"use strict";
const target = { score: 0 };
const record = new Proxy(target, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    if (key === "score" && !Number.isFinite(value)) return false;
    return Reflect.set(target, key, value, receiver);
  },
});

record.score = 80;
console.log(record.score, target.score); // 80 80
try { record.score = NaN; }
catch (error) { console.log(error.name); } // TypeError

set 的结果会按布尔值解释；失败在严格模式赋值中表现为 TypeError。在非严格模式下通常静默失败，调用方不应靠它得到明确的校验反馈。实际业务也可以主动抛出更具体的错误。

拦截器返回 true 只是报告操作成功，Proxy 不会随后替它补做赋值。默认转发应返回 Reflect.set 的真实结果；目标的 setter、其他代理等逻辑仍可能抛错，所以 Reflect 方法也不保证把所有异常都转换成 false。

Object.defineProperty(record, "score", ...) 走的是属性定义入口，直接写 target.score 又会绕过代理。若要建立强制约束，必须控制这些入口或采用更明确的封装。反过来，Reflect.set(target, key, value, receiver) 的接收者若是代理，又可能继续触发 defineProperty；同时记录多个 trap 时要避免把一次逻辑更新重复通知。

与描述符的分工见 JavaScript 对象属性。描述符 getter/setter 只定义对应属性的行为，Proxy 可以代理更多操作，但它不会自动产生依赖图和更新调度。

5. 代理不变量

卡 · Proxy 为什么不能任意隐藏属性或伪造读取结果？

不变量是代理仍必须遵守的对象约束，用来保证不可配置属性和不可扩展状态等基础语义不会被任意伪造。

例如，目标存在不可配置、不可写的自有数据属性时，get 不能报告不同的值：

const target = {};
Object.defineProperty(target, "id", { value: 1 });
const proxy = new Proxy(target, {
  get() { return 2; },
});

try { console.log(proxy.id); }
catch (error) { console.log(error.name); } // TypeError

id 省略的 writable 和 configurable 默认都是 false，代理返回 2 与受保护的数据值冲突。类似地，ownKeys 不能漏掉不可配置的自有键；目标不可扩展时，返回的键集合也必须与目标自有键保持一致，不能添加不存在的键或隐藏已有键。

这些检查发生在拦截器结果返回之后，所以“我的 trap 正常返回了”不代表整个对象操作一定成功。需要过滤字段时，应明确数据接口或产生新的投影对象，而不是假定任何原对象都能被代理伪装成另一种结构。

6. 嵌套、内部状态与撤销

卡 · Proxy 能拦截哪些操作，原对象与嵌套对象会自动受到拦截吗？卡 · 为什么空处理器代理也可能无法正常使用 Map 或类私有字段？

6.1 嵌套对象不自动代理

代理只包装传入的那个对象。读取嵌套字段时，如果返回的是原来的子对象，后续对这个子对象的操作就不会经过外层代理。

const target = { nested: { count: 1 } };
const keys = [];
const proxy = new Proxy(target, {
  get(target, key, receiver) {
    keys.push(key);
    return Reflect.get(target, key, receiver);
  },
});
proxy.nested.count = 2;
console.log(keys);                // ["nested"]
console.log(target.nested.count); // 2

这里没有拦截到子对象的 count 写入。深层响应式通常需要在读取嵌套对象时继续包装，并用缓存维持代理身份。只对外层 new Proxy 一次，不会自动解决深层访问、循环结构或重复包装。

6.2 内置对象与私有字段

代理与目标不是同一个对象，目标的内部状态也不会自动复制到代理上。Map 的 size、方法以及类私有字段，可能要求接收者具有特定内部状态。

const map = new Map([["key", 1]]);
const proxy = new Proxy(map, {});
try { console.log(proxy.size); }
catch (error) { console.log(error.name); } // TypeError

Map.prototype 上的 size getter 接收的是代理，而代理自身没有 Map 条目使用的内部状态。类的方法通过 this.#field 访问私有字段时，也可能因为 this 是代理而失败。

有些专用包装器会让 getter 或方法使用原目标作为接收者，但这会改变默认 receiver 语义，也可能使方法内部访问绕过代理。把所有函数都临时 bind(target) 还会产生新的函数身份。应该按对象类型设计适配，不把这种做法当成通用响应式实现。

6.3 可撤销代理

Proxy.revocable 返回代理和撤销函数。撤销后，经由该代理执行需要转发的对象操作会抛 TypeError；原目标仍然存在，直接持有它的代码不会因此失去访问能力。

const target = { value: 1 };
const { proxy, revoke } = Proxy.revocable(target, {});
console.log(proxy.value); // 1
revoke();
try { console.log(proxy.value); }
catch (error) { console.log(error.name); } // TypeError
console.log(target.value); // 1