Proxy 与 Reflect 实际应用

1. 学习目标

本节采用 Bloom 分类法对学习目标进行层级化建模，确保读者能够由浅入深、由具体到抽象地掌握 Proxy 与 Reflect 的全部要义。

1.1 记忆层（Remember）

• 准确列出 Proxy 的 13 个陷阱（Trap）：get、set、has、deleteProperty、ownKeys、getOwnPropertyDescriptor、defineProperty、getPrototypeOf、setPrototypeOf、isExtensible、preventExtensions、apply、construct。
• 复述 Reflect 对象上的 14 个静态方法（多出 Reflect.defineProperty 与 Reflect.getOwnPropertyDescriptor 等）与 Proxy 陷阱的一一对应关系。
• 回忆 ES2015（ES6）将 Proxy 与 Reflect 引入标准的版本号、TC39 提案路径与早期 Proxy.create API 被废弃的缘由。

1.2 理解层（Understand）

• 解释 Proxy 与元编程（Metaprogramming）的关系：Proxy 拦截对象内部方法（Internal Method），而非语法层面的运算符。
• 阐释 receiver 参数在 get / set 陷阱中的语义：为何需要传递 receiver 才能正确触发继承链上的 setter。
• 说明 Reflect 的设计动机：从 Object 上”借用”内部方法的镜像 API，统一返回值与异常语义，便于在 Proxy 陷阱中转发默认行为。

1.3 应用层（Apply）

• 在生产项目中使用 Proxy 实现表单校验、API 缓存、函数调用日志、负索引数组、私有属性屏蔽等典型场景。
• 通过 Proxy.revocable 实现临时授权代理，在 API 密钥传递后立即撤销访问能力。
• 在 Vue3 风格的响应式系统中组合 WeakMap + Proxy + Reflect 实现深响应、依赖追踪与触发更新。

1.4 分析层（Analyze）

• 对比 Vue2 Object.defineProperty 与 Vue3 Proxy 两种响应式实现，剖析数组下标修改、新属性添加、Map/Set 集合类型支持等差异的根因。
• 拆解 Immer 的 produce 实现：Proxy 如何延迟拷贝（Copy-on-Write）、current 与 original 如何分离、冻结语义如何保证。
• 分析 MobX、Solid.js、Vue Reactivity、S.js 四套响应式系统在依赖追踪数据结构（WeakMap<Target, Map<Key, Set<Effect>>>）与调度策略上的异同。

1.5 评价层（Evaluate）

• 评估在同一业务场景下，“Proxy 方案”与”装饰器方案”、“Object.defineProperty 方案”、“手写 getter/setter 方案”在可读性、性能、维护成本、兼容性四维度上的得分。
• 对给定的三套私有属性实现（命名约定 _、WeakMap 私有存储、Proxy 拦截 + Symbol 私有键）评判其封装强度与运行时开销。
• 评审主流框架（Vue3、MobX、Immer、Solid）的 Proxy 使用模式，给出可量化的性能与可维护性改进建议。

1.6 创造层（Create）

• 设计并实现一个面向团队的 ORM 层，通过 Proxy 拦截属性访问实现懒加载（Lazy Load）、关系映射（Relation Mapping）、查询构建（Query Builder）。
• 构建一套基于 Proxy 的 RPC 调用层，将远程方法调用透明地映射为本地对象方法调用，含超时、重试、熔断与序列化策略。
• 撰写一份团队级《JavaScript 元编程工程规范》文档，包含 Proxy 使用准则、性能预算、Code Review 检查项、CI 静态分析脚本与不可变约束。

2. 历史动机与演化

2.1 元编程的思想起源（1960-1990）

元编程（Metaprogramming）的概念最早可追溯至 1960 年代 Lisp 的宏系统。Lisp 程序本身就是 Lisp 数据（“代码即数据”），开发者可以编写操纵代码的程序。这一思想催生了 Smalltalk 的元类（Metaclass）、CLOS 的元对象协议（Metaobject Protocol, MOP）、Python 的 __getattr__ / __setattr__ 魔术方法。

JavaScript 在 1995 年由 Brendan Eich 设计之初就带有元编程色彩：每个对象都有 [[Prototype]] 内部槽，函数也是一等对象。但直到 ES5（2009），JavaScript 才通过 Object.defineProperty 与 Object.create 提供受控的元编程能力。

2.2 ES5 Object.defineProperty 时代（2009-2015）

ES5 引入 Object.defineProperty(obj, key, descriptor)，允许精确定义属性的数据描述符（value/writable）或存取描述符（get/set）：

// ES5 风格的响应式（Vue2 早期实现）
function defineReactive(obj, key, val) {
  let dep = new Dep();
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      dep.depend();
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify();
    }
  });
}

Object.defineProperty 的局限：

1. 无法监听属性新增/删除：必须预先定义所有 key，新增属性需 Vue.set 手动触发。
2. 无法监听数组索引与 length：Vue2 通过劫持 7 个数组方法（push/pop/shift/unshift/splice/sort/reverse）绕过。
3. 无法监听 Map/Set 集合类型：这些集合的内部状态不走属性访问。
4. 深度监听需要递归遍历：初始化成本高，对大型对象性能不友好。

2.3 Proxy 提案的演进（2008-2015）

Proxy 的早期提案由 Mozilla 的 Tom Van Cutsem 与 Mark Miller 于 2008 年提出，灵感来自 ECMAScript 4 的”catchalls”概念。早期 API 形式为 Proxy.create(handler, proto)，陷阱名称与现今不同（如 getOwnPropertyDescriptor 当时叫 getOwnPropertyDescriptor 但返回值约定不同）。

2011 年，TC39 在 ES6 草案中重构 Proxy API：

• 改为构造函数形式 new Proxy(target, handler)。
• 陷阱名称与对象内部方法（如 [[Get]]、[[Set]]）一一对应。
• 引入 Reflect 对象，提供与陷阱对应的默认行为转发 API。
• 废弃 Proxy.create，统一为 new Proxy。

2015 年 6 月，ES2015（ES6）正式发布，Proxy 与 Reflect 成为标准。

2.4 引擎实现时间线

2.5 框架采用时间线

2.6 浏览器兼容性现状

截至 2026 年，Proxy 与 Reflect 在主流环境的支持情况：

对需要兼容 IE 或旧版环境的项目，可使用 core-js 的 Proxy polyfill（仅支持 get/set/has/deleteProperty 四个陷阱，且无法代理 Map/Set）。

3. 形式化定义

3.1 对象内部方法（Internal Methods）

ECMAScript 规范定义每个对象都有一组”内部方法”（也称”内部槽”，Internal Slot），这些方法对 JavaScript 代码不可直接访问，但被运算符和语句隐式调用。Proxy 的本质是替换这些内部方法的实现。

核心内部方法与对应运算符/语法：

普通对象的内部方法有默认实现（如 [[Get]] 沿原型链查找）。Proxy 通过 handler 对象的陷阱函数替换这些默认实现。

3.2 Proxy 的代数定义

定义 1（Proxy 对象）：Proxy 是一个复合对象 $P = (\text{target}, \text{handler})$，其中：

• $\text{target}$：被代理的对象，称为”目标对象”。
• $\text{handler}$：陷阱函数的集合，可为空对象 {}。

定义 2（陷阱转发规则）：对任意内部方法 $M$，$P$ 的内部方法 $P.M$ 定义为：

即：若 handler 上定义了对应陷阱，则调用陷阱；否则转发给 target 的默认实现。

3.3 Reflect 的形式化语义

Reflect 对象上的每个静态方法都是对应内部方法的”裸函数”形式：

关键性质：

1. 一一对应：Reflect.get(t, k) 等价于 t[[Get]](k, t)，参数顺序与 Proxy 陷阱一致。
2. 返回值语义：Reflect.set 返回布尔值表示成功，而非抛异常；与 Object.defineProperty 的异常语义不同。
3. 转发友好：在 Proxy 陷阱中调用 Reflect.M(target, ...args) 即可获得默认行为。

3.4 不变式（Invariants）

ECMAScript 规范对 Proxy 陷阱的返回值施加不变式约束，违反将抛出 TypeError。不变式是为了保证对象系统的语义一致性，使外部代码无法通过 Proxy 破坏语言不变量。

关键不变式举例：

3.5 receiver 参数的形式化语义

get 与 set 陷阱的第三参数 receiver 表示”接收者”，即属性访问的发起对象。其语义为：

若 obj 的属性有 getter，则 getter 的 this 绑定为 receiver 而非 obj。在 Proxy 陷阱中，正确写法是 Reflect.get(target, key, receiver)，确保继承场景下 getter 的 this 指向 Proxy 本身。

4. 理论推导与证明

4.1 引理：Proxy 不改变对象的类型

引理：对任意对象 $T$ 与陷阱集合 $H$，new Proxy(T, H) 的类型（typeof 与 [[Class]]）与 $T$ 相同。

证明：

ECMAScript 规范 §6.1.7.3 规定 ProxyExoticObject 的内部槽与 $T$ 的内部槽一一对应：

• 若 $T$ 是普通对象（Ordinary Object），则 Proxy 也是普通对象，typeof 返回 'object'。
• 若 $T$ 是函数（Callable），则 Proxy 也是可调用对象，typeof 返回 'function'。
• 若 $T$ 是数组（[[Class]] 为 'Array'），则 Proxy 也是数组，Array.isArray(proxy) 返回 true。

证毕。

推论：函数与数组均可被 Proxy 代理，且代理后保留原类型语义。

4.2 定理：Reflect 是陷阱转发的对偶

定理：对任意对象 $T$ 与陷阱函数 $f$，若 $f$ 调用 Reflect.M(T, ...args)，则 Proxy 的语义等价于”无陷阱”。

证明：

设 $P = \text{new Proxy}(T, \{M: f\})$，其中 $f(\text{target}, \ldots\text{args}) = \text{Reflect}.M(\text{target}, \ldots\text{args})$。

根据 Reflect 的定义，$\text{Reflect}.M(\text{target}, \ldots\text{args}) \equiv \text{target}.M(\ldots\text{args})$。

故 $P.M(\ldots\text{args}) = f(T, \ldots\text{args}) = \text{Reflect}.M(T, \ldots\text{args}) = T.M(\ldots\text{args})$。

即 $P$ 的内部方法 $M$ 与 $T$ 的内部方法 $M$ 行为一致，相当于”无陷阱”。

证毕。

工程意义：将陷阱实现为 Reflect.M 转发是 Proxy 的”零行为”，便于在零行为基础上插入额外逻辑（如日志、校验）而不改变默认语义。

4.3 命题：深层响应式的递归终止性

命题：基于 WeakMap + Proxy 的深层响应式实现，对任意对象图的递归代理必然终止。

证明：

设响应式函数 reactive(obj) 在 WeakMap 中缓存已代理对象：

reactive(obj):
  if obj is primitive or null: return obj
  if proxyMap.has(obj): return proxyMap.get(obj)
  const proxy = new Proxy(obj, handler)
  proxyMap.set(obj, proxy)
  return proxy

get 陷阱在返回嵌套对象时递归调用 reactive：

get(target, key, receiver):
  const res = Reflect.get(target, key, receiver)
  return reactive(res)

考虑对象图 $G = (V, E)$，$V$ 为对象集合，$E$ 为引用关系。

关键观察：

1. 每个 $v \in V$ 至多被代理一次（WeakMap 缓存）。
2. 递归调用 reactive(v) 仅在首次访问时创建代理，后续访问直接返回缓存。
3. 对象图 $G$ 是有限的（受堆内存约束），故递归深度有限。

但需注意：若对象图含环（如 a.b = b, b.a = a），WeakMap 缓存确保环不会导致无限递归——访问 a.b 创建 b 的代理后，b.a 访问的是已缓存的 a 代理。

证毕。

工程意义：WeakMap 缓存是深层响应式的正确性保证，且不会造成内存泄漏（WeakMap 持有弱引用）。

4.4 推论：Proxy 的不变式保证语言安全性

推论：Proxy 的不变式约束保证外部代码无法通过 Proxy 绕过 Object.freeze、Object.seal 等冻结语义。

证明：

考虑 const frozen = Object.freeze({ x: 1 })，则 frozen 的 x 属性为不可写、不可配置、不可扩展。

构造 Proxy(frozen, { set() { return true; } })。当外部代码执行 proxy.x = 2 时：

1. 调用陷阱 set(target, 'x', 2, receiver)。
2. 陷阱返回 true。
3. 规范检查不变式：target.x 不可写且不可配置，要求陷阱返回 false。
4. 陷阱返回 true 违反不变式，抛出 TypeError。

证毕。

工程意义：开发者可以安全地将冻结对象传给不可信代码包装在 Proxy 中，不变式保证语义不被破坏。

4.5 定理：Proxy 的性能开销下界

定理：Proxy 在任意陷阱上的性能开销下界为 $O(1)$（每次访问），但常系数大于直接属性访问。

证明：

V8 的 Proxy 实现在内部对象上添加 [[ProxyHandler]] 与 [[ProxyTarget]] 两个内部槽。每次属性访问时：

1. 检查对象的内部类型，若为 ProxyExoticObject，进入代理路径。
2. 查找 [[ProxyHandler]] 上是否有对应陷阱。
3. 若有，调用陷阱函数（涉及一次函数调用与参数构造）。
4. 若无，转发到 [[ProxyTarget]] 的对应内部方法。

每个步骤均为 $O(1)$ 操作，故渐近复杂度为 $O(1)$。但相较于直接属性访问（V8 的内联缓存 IC 命中时仅需 1-2 条机器指令），Proxy 路径需 5-10 倍的指令数，常系数显著更大。

证毕。

实测数据（V8 12.x，2024）：

工程意义：Proxy 适用于低频操作（如配置访问、API 调用），但对热点路径（如每帧渲染、每像素处理）应避免。

5. 代码示例

5.1 基础用法：13 种陷阱演示

// 文件名: proxy-all-traps.js
// 运行方式: node proxy-all-traps.js

/**
 * 演示 Proxy 的 13 个陷阱
 */

const target = {
  name: 'Alice',
  age: 30,
  greet() {
    return `Hello, I'm ${this.name}`;
  }
};

const handler = {
  // 1. 读取属性
  get(t, key, receiver) {
    console.log(`[get] ${String(key)}`);
    return Reflect.get(t, key, receiver);
  },

  // 2. 设置属性
  set(t, key, value, receiver) {
    console.log(`[set] ${String(key)} = ${value}`);
    return Reflect.set(t, key, value, receiver);
  },

  // 3. in 操作符
  has(t, key) {
    console.log(`[has] ${String(key)}`);
    return Reflect.has(t, key);
  },

  // 4. delete 操作符
  deleteProperty(t, key) {
    console.log(`[delete] ${String(key)}`);
    return Reflect.deleteProperty(t, key);
  },

  // 5. Object.keys / Object.getOwnPropertyNames
  ownKeys(t) {
    console.log('[ownKeys]');
    return Reflect.ownKeys(t);
  },

  // 6. Object.getOwnPropertyDescriptor
  getOwnPropertyDescriptor(t, key) {
    console.log(`[getOwnPropertyDescriptor] ${String(key)}`);
    return Reflect.getOwnPropertyDescriptor(t, key);
  },

  // 7. Object.defineProperty
  defineProperty(t, key, descriptor) {
    console.log(`[defineProperty] ${String(key)}`);
    return Reflect.defineProperty(t, key, descriptor);
  },

  // 8. Object.getPrototypeOf
  getPrototypeOf(t) {
    console.log('[getPrototypeOf]');
    return Reflect.getPrototypeOf(t);
  },

  // 9. Object.setPrototypeOf
  setPrototypeOf(t, proto) {
    console.log('[setPrototypeOf]');
    return Reflect.setPrototypeOf(t, proto);
  },

  // 10. Object.isExtensible
  isExtensible(t) {
    console.log('[isExtensible]');
    return Reflect.isExtensible(t);
  },

  // 11. Object.preventExtensions
  preventExtensions(t) {
    console.log('[preventExtensions]');
    return Reflect.preventExtensions(t);
  },

  // 12. 函数调用（仅当 target 是函数时有效）
  apply(t, thisArg, args) {
    console.log(`[apply] args: ${JSON.stringify(args)}`);
    return Reflect.apply(t, thisArg, args);
  },

  // 13. new 操作符（仅当 target 是函数时有效）
  construct(t, args, newTarget) {
    console.log(`[construct] args: ${JSON.stringify(args)}`);
    return Reflect.construct(t, args, newTarget);
  }
};

const proxy = new Proxy(target, handler);

// 触发各陷阱
proxy.name;              // [get] name
proxy.name = 'Bob';      // [set] name = Bob
'name' in proxy;         // [has] name
delete proxy.age;        // [delete] age
Object.keys(proxy);      // [ownKeys]
Object.getOwnPropertyDescriptor(proxy, 'name');
Object.defineProperty(proxy, 'email', { value: 'a@b.com' });
Object.getPrototypeOf(proxy);
Object.setPrototypeOf(proxy, { toString() { return 'X' } });
Object.isExtensible(proxy);
Object.preventExtensions(proxy);

// 函数代理
function fn(x) { return x * 2; }
const fnProxy = new Proxy(fn, handler);
fnProxy(21);             // [apply] args: [21]
new fnProxy(21);         // [construct] args: [21]

5.2 响应式系统（Vue3 风格简化实现）

// 文件名: reactive-system.js
// 运行方式: node reactive-system.js

/**
 * Vue3 响应式系统的简化实现
 * 特性：依赖追踪、深响应、effect 调度
 */

// 全局依赖映射表：target -> key -> Set<effect>
const targetMap = new WeakMap();
let activeEffect = null;
const effectStack = [];

// 依赖收集
function track(target, key) {
  if (!activeEffect) return;
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }
  dep.add(activeEffect);
  // 反向记录：effect -> dep，便于清理
  activeEffect.deps.push(dep);
}

// 触发更新
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(key);
  if (!dep) return;
  // 复制一份再遍历，避免在执行 effect 时修改 dep 导致迭代异常
  const effects = new Set(dep);
  effects.forEach(effect => {
    if (effect !== activeEffect) {
      if (effect.scheduler) {
        effect.scheduler();
      } else {
        effect.run();
      }
    }
  });
}

// 响应式代理
const proxyMap = new WeakMap();
const RAW_SYMBOL = Symbol('raw');

function reactive(target) {
  if (typeof target !== 'object' || target === null) return target;
  if (target[RAW_SYMBOL]) return target;  // 已经是代理
  if (proxyMap.has(target)) return proxyMap.get(target);

  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      if (key === RAW_SYMBOL) return target;
      const res = Reflect.get(target, key, receiver);
      track(target, key);
      // 深层响应：返回嵌套对象的代理
      if (typeof res === 'object' && res !== null) {
        return reactive(res);
      }
      return res;
    },
    set(target, key, value, receiver) {
      // 处理 raw 值：若 value 也是代理，取其 raw
      const rawValue = value && value[RAW_SYMBOL] ? value[RAW_SYMBOL] : value;
      const oldValue = Reflect.get(target, key, receiver);
      const hadKey = Reflect.has(target, key);
      const result = Reflect.set(target, key, rawValue, receiver);
      // 仅当 receiver 是当前 target 的代理时才触发（避免原型链误触发）
      if (target === (receiver[RAW_SYMBOL] || receiver)) {
        if (!hadKey) {
          // 新增属性
          trigger(target, key);
        } else if (oldValue !== rawValue) {
          // 修改属性
          trigger(target, key);
        }
      }
      return result;
    },
    deleteProperty(target, key) {
      const hadKey = Reflect.has(target, key);
      const result = Reflect.deleteProperty(target, key);
      if (hadKey && result) {
        trigger(target, key);
      }
      return result;
    }
  });

  proxyMap.set(target, proxy);
  return proxy;
}

// effect 函数：建立响应式依赖
function effect(fn, options = {}) {
  const _effect = {
    fn,
    scheduler: options.scheduler,
    deps: [],
    run() {
      try {
        effectStack.push(_effect);
        activeEffect = _effect;
        return fn();
      } finally {
        effectStack.pop();
        activeEffect = effectStack[effectStack.length - 1] || null;
      }
    }
  };
  _effect.run();
  return _effect;
}

// computed：基于 effect 与 scheduler 实现
function computed(getter) {
  let value;
  let dirty = true;
  const _effect = effect(getter, {
    scheduler() {
      dirty = true;
    },
    lazy: true
  });
  // 重写 run：避免立即执行
  _effect.run = () => {
    if (dirty) {
      value = _effect.fn();
      dirty = false;
    }
    return value;
  };
  return {
    get value() {
      return _effect.run();
    }
  };
}

// 演示
const state = reactive({ count: 0, list: [1, 2, 3] });

effect(() => {
  console.log(`count is ${state.count}`);
});

effect(() => {
  console.log(`list length is ${state.list.length}`);
});

state.count = 1;        // 触发：count is 1
state.count = 2;        // 触发：count is 2
state.list.push(4);     // 触发：list length is 4（数组 push 被正确拦截）

const double = computed(() => state.count * 2);
console.log(double.value);  // 4
state.count = 10;
console.log(double.value);  // 20

5.3 表单校验代理

// 文件名: validation-proxy.js
// 运行方式: node validation-proxy.js

/**
 * 基于 Proxy 的类型与约束校验
 * 支持：类型检查、范围检查、自定义校验、必填字段
 */

class Schema {
  constructor(definition) {
    this.definition = definition;
  }

  validate(key, value) {
    const rule = this.definition[key];
    if (!rule) return { valid: true };

    if (rule.required && (value === undefined || value === null)) {
      return { valid: false, error: `${key} is required` };
    }

    if (value === undefined || value === null) {
      return { valid: true };
    }

    if (rule.type && typeof value !== rule.type) {
      return { valid: false, error: `${key} must be ${rule.type}, got ${typeof value}` };
    }

    if (rule.min !== undefined && value < rule.min) {
      return { valid: false, error: `${key} must be >= ${rule.min}` };
    }

    if (rule.max !== undefined && value > rule.max) {
      return { valid: false, error: `${key} must be <= ${rule.max}` };
    }

    if (rule.pattern && !rule.pattern.test(value)) {
      return { valid: false, error: `${key} format invalid` };
    }

    if (rule.validator && !rule.validator(value)) {
      return { valid: false, error: `${key} validation failed` };
    }

    return { valid: true };
  }
}

function validated(schema) {
  const target = {};
  const errors = {};

  const proxy = new Proxy(target, {
    set(t, key, value, receiver) {
      const result = schema.validate(key, value);
      if (!result.valid) {
        errors[key] = result.error;
        // 选择一：抛异常（严格模式）
        throw new TypeError(result.error);
        // 选择二：仅记录错误，不写入
        // return true;
      }
      delete errors[key];
      return Reflect.set(t, key, value, receiver);
    },
    get(t, key, receiver) {
      if (key === 'errors') return errors;
      if (key === 'validate') return () => {
        for (const k of Object.keys(schema.definition)) {
          const result = schema.validate(k, t[k]);
          if (!result.valid) {
            errors[k] = result.error;
          }
        }
        return Object.keys(errors).length === 0;
      };
      return Reflect.get(t, key, receiver);
    }
  });

  return proxy;
}

const userSchema = new Schema({
  name: { type: 'string', required: true, min: 1, max: 50 },
  age: { type: 'number', min: 0, max: 150, required: true },
  email: { type: 'string', pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ },
  role: { type: 'string', validator: v => ['admin', 'user', 'guest'].includes(v) }
});

const user = validated(userSchema);

user.name = 'Alice';
user.age = 30;
user.email = 'alice@example.com';
user.role = 'admin';
console.log(user.errors);  // {}
console.log(user.validate());  // true

try {
  user.age = -1;
} catch (e) {
  console.log(e.message);  // age must be >= 0
}

try {
  user.email = 'invalid';
} catch (e) {
  console.log(e.message);  // email format invalid
}

5.4 缓存代理（带 TTL 与 LRU）

// 文件名: cache-proxy.js
// 运行方式: node cache-proxy.js

/**
 * 带 TTL（生存期）与 LRU（最近最少使用）淘汰的缓存代理
 */

class TTLCache {
  constructor(maxSize = 100, defaultTTL = 60_000) {
    this.maxSize = maxSize;
    this.defaultTTL = defaultTTL;
    this.cache = new Map();
    this.timers = new Map();
  }

  get(key) {
    if (!this.cache.has(key)) return undefined;
    // LRU：访问后重新插入到末尾
    const value = this.cache.get(key);
    this.cache.delete(key);
    this.cache.set(key, value);
    return value;
  }

  set(key, value, ttl = this.defaultTTL) {
    // 若 key 已存在，先清理旧 timer
    if (this.timers.has(key)) {
      clearTimeout(this.timers.get(key));
    }

    // LRU：超过容量时淘汰最旧
    if (this.cache.size >= this.maxSize) {
      const oldestKey = this.cache.keys().next().value;
      this.cache.delete(oldestKey);
      if (this.timers.has(oldestKey)) {
        clearTimeout(this.timers.get(oldestKey));
        this.timers.delete(oldestKey);
      }
    }

    this.cache.set(key, value);

    // 设置 TTL 过期
    if (ttl > 0) {
      const timer = setTimeout(() => {
        this.cache.delete(key);
        this.timers.delete(key);
      }, ttl);
      timer.unref?.();
      this.timers.set(key, timer);
    }
  }

  has(key) {
    return this.cache.has(key);
  }

  clear() {
    this.timers.forEach(t => clearTimeout(t));
    this.timers.clear();
    this.cache.clear();
  }

  size() {
    return this.cache.size;
  }
}

/**
 * 包装异步函数，自动缓存结果
 * @param {Function} fn 异步函数
 * @param {Object} options 缓存选项
 */
function cachedProxy(fn, options = {}) {
  const cache = new TTLCache(options.maxSize ?? 100, options.ttl ?? 60_000);

  return new Proxy(fn, {
    apply(target, thisArg, args) {
      const key = options.keyBuilder
        ? options.keyBuilder(args)
        : JSON.stringify(args);

      if (cache.has(key)) {
        return Promise.resolve(cache.get(key));
      }

      return Reflect.apply(target, thisArg, args).then(result => {
        cache.set(key, result);
        return result;
      });
    }
  });
}

// 演示
const fetchUser = cachedProxy(
  async (userId) => {
    console.log(`[fetch] fetching user ${userId}`);
    // 模拟网络延迟
    await new Promise(r => setTimeout(r, 100));
    return { id: userId, name: `User ${userId}`, fetchedAt: Date.now() };
  },
  { ttl: 5000, maxSize: 50 }
);

(async () => {
  console.log(await fetchUser(1));  // [fetch] fetching user 1，等待 100ms
  console.log(await fetchUser(1));  // 直接返回缓存
  console.log(await fetchUser(2));  // [fetch] fetching user 2

  // 等待 TTL 过期后再次访问
  await new Promise(r => setTimeout(r, 5500));
  console.log(await fetchUser(1));  // [fetch] fetching user 1（重新请求）
})();

5.5 私有属性代理（Symbol + 命名约定）

// 文件名: private-proxy.js
// 运行方式: node private-proxy.js

/**
 * 多种私有属性实现方案对比
 */

// 方案 1：命名约定（弱私有，外部可访问）
class UserWeakPrivate {
  #internal = Symbol('internal');
  constructor(name) {
    this.name = name;
    this._secret = `${name}-secret`;  // 命名约定：下划线前缀
  }
}

// 方案 2：WeakMap 私有存储（中等私有）
const privateStore = new WeakMap();
class UserMapPrivate {
  constructor(name, secret) {
    this.name = name;
    privateStore.set(this, { secret });
  }
  getSecret() {
    return privateStore.get(this).secret;
  }
}

// 方案 3：Proxy 拦截（强私有，但可被 Reflect 绕过部分场景）
function withPrivate(target, privateKeys) {
  const privateKeySet = new Set(privateKeys);
  return new Proxy(target, {
    get(t, key, receiver) {
      if (privateKeySet.has(key)) {
        throw new Error(`Cannot access private property: ${String(key)}`);
      }
      return Reflect.get(t, key, receiver);
    },
    set(t, key, value, receiver) {
      if (privateKeySet.has(key)) {
        throw new Error(`Cannot set private property: ${String(key)}`);
      }
      return Reflect.set(t, key, value, receiver);
    },
    has(t, key) {
      if (privateKeySet.has(key)) return false;
      return Reflect.has(t, key);
    },
    ownKeys(t) {
      return Reflect.ownKeys(t).filter(k => !privateKeySet.has(k));
    },
    getOwnPropertyDescriptor(t, key) {
      if (privateKeySet.has(key)) return undefined;
      return Reflect.getOwnPropertyDescriptor(t, key);
    }
  });
}

// 方案 4：ES2022 私有字段 #field（语言级强私有）
class UserNativePrivate {
  #password;
  constructor(name, password) {
    this.name = name;
    this.#password = password;
  }
  verify(input) {
    return this.#password === input;
  }
}

// 演示
const user = withPrivate(
  { name: 'Alice', _secret: 'password123', apiKey: 'sk-xxx' },
  ['_secret', 'apiKey']
);

console.log(user.name);       // Alice
console.log(Object.keys(user));  // ['name']
console.log('_secret' in user);  // false
try {
  console.log(user._secret);
} catch (e) {
  console.log(e.message);  // Cannot access private property: _secret
}

// ES2022 私有字段
const u = new UserNativePrivate('Bob', 'mypass');
console.log(u.verify('mypass'));  // true
console.log(u.verify('wrong'));   // false
// console.log(u.#password);  // SyntaxError

5.6 函数调用日志与性能监控

// 文件名: trace-proxy.js
// 运行方式: node trace-proxy.js

/**
 * 函数调用追踪代理：日志、耗时、错误统计
 */

function trace(fn, options = {}) {
  const stats = {
    calls: 0,
    errors: 0,
    totalTime: 0,
    maxTime: 0,
    minTime: Infinity
  };

  const proxy = new Proxy(fn, {
    apply(target, thisArg, args) {
      const start = performance.now();
      stats.calls++;

      if (options.log) {
        console.log(`[trace] call ${target.name}(${args.map(a => JSON.stringify(a)).join(', ')})`);
      }

      try {
        const result = Reflect.apply(target, thisArg, args);
        // 处理 Promise 返回值
        if (result && typeof result.then === 'function') {
          return result.then(
            v => {
              recordTime(performance.now() - start);
              return v;
            },
            e => {
              stats.errors++;
              recordTime(performance.now() - start);
              throw e;
            }
          );
        }
        recordTime(performance.now() - start);
        return result;
      } catch (e) {
        stats.errors++;
        recordTime(performance.now() - start);
        throw e;
      }
    }
  });

  function recordTime(ms) {
    stats.totalTime += ms;
    if (ms > stats.maxTime) stats.maxTime = ms;
    if (ms < stats.minTime) stats.minTime = ms;
  }

  proxy.stats = stats;
  proxy.reset = () => {
    stats.calls = 0;
    stats.errors = 0;
    stats.totalTime = 0;
    stats.maxTime = 0;
    stats.minTime = Infinity;
  };

  return proxy;
}

// 演示
function fib(n) {
  if (n < 2) return n;
  return fib(n - 1) + fib(n - 2);
}
const tracedFib = trace(fib, { log: false });

console.log(tracedFib(30));
console.log(tracedFib.stats);
// { calls: 1, errors: 0, totalTime: 12.5, maxTime: 12.5, minTime: 12.5 }

const tracedFetch = trace(async (url) => {
  // 模拟 fetch
  await new Promise(r => setTimeout(r, Math.random() * 100));
  return { ok: true, url };
});

(async () => {
  await tracedFetch('https://api.example.com/users');
  await tracedFetch('https://api.example.com/posts');
  console.log(tracedFetch.stats);
})();

5.7 负索引与多维数组

// 文件名: fancy-array.js
// 运行方式: node fancy-array.js

/**
 * 支持 Python 风格的负索引、切片、链式访问的数组
 */

function fancyArray(arr) {
  return new Proxy(arr, {
    get(target, key, receiver) {
      // 数字索引（含负数）
      if (typeof key === 'string' && /^-?\d+$/.test(key)) {
        let index = parseInt(key);
        if (index < 0) index = target.length + index;
        return Reflect.get(target, index, receiver);
      }

      // 切片：'1:3' 或 ':-1'
      if (typeof key === 'string' && key.includes(':')) {
        const [start, end] = key.split(':').map(s => (s === '' ? undefined : parseInt(s)));
        return fancyArray(target.slice(start, end));
      }

      // 方法代理：使方法返回值也被包装
      const value = Reflect.get(target, key, receiver);
      if (typeof value === 'function') {
        return function (...args) {
          const result = Reflect.apply(value, target, args);
          return Array.isArray(result) ? fancyArray(result) : result;
        };
      }
      return value;
    },
    set(target, key, value, receiver) {
      if (typeof key === 'string' && /^-?\d+$/.test(key)) {
        let index = parseInt(key);
        if (index < 0) index = target.length + index;
        return Reflect.set(target, index, value, receiver);
      }
      return Reflect.set(target, key, value, receiver);
    }
  });
}

const arr = fancyArray([10, 20, 30, 40, 50]);
console.log(arr[0]);      // 10
console.log(arr[-1]);     // 50
console.log(arr[-2]);     // 40
console.log(arr['1:3']);  // [20, 30]（返回的仍是 fancyArray）
console.log(arr[':-1']);  // [10, 20, 30, 40]
arr[-1] = 999;
console.log(arr[4]);      // 999

// 方法链式调用
console.log(arr.map(x => x * 2).filter(x => x > 20));  // [40, 60, 80, 1998]

5.8 可撤销代理（API 密钥传递）

// 文件名: revocable-proxy.js
// 运行方式: node revocable-proxy.js

/**
 * 可撤销代理：临时授权访问，撤销后所有操作抛 TypeError
 */

class SecureAPI {
  constructor(apiKey) {
    this.apiKey = apiKey;
    this.userData = { name: 'Alice', balance: 1000 };
  }

  getProfile() {
    return { ...this.userData };
  }

  transfer(amount, to) {
    if (amount > this.userData.balance) {
      throw new Error('Insufficient balance');
    }
    this.userData.balance -= amount;
    console.log(`Transferred ${amount} to ${to}`);
  }
}

function createTemporaryAccess(api, duration) {
  // 创建可撤销代理，仅暴露部分方法
  const { proxy, revoke } = Proxy.revocable(api, {
    get(target, key, receiver) {
      // 屏蔽 apiKey 等敏感字段
      const allowed = ['getProfile', 'transfer'];
      if (!allowed.includes(key)) {
        return undefined;
      }
      return Reflect.get(target, key, receiver);
    },
    set() {
      throw new Error('Mutation not allowed');
    }
  });

  // 定时撤销
  const timer = setTimeout(revoke, duration);

  return {
    api: proxy,
    revoke: () => {
      clearTimeout(timer);
      revoke();
    }
  };
}

// 演示
const api = new SecureAPI('sk-secret-key');
const { api: tempApi, revoke } = createTemporaryAccess(api, 2000);

console.log(tempApi.getProfile());  // { name: 'Alice', balance: 1000 }
tempApi.transfer(100, 'Bob');       // Transferred 100 to Bob
console.log(tempApi.apiKey);        // undefined（被屏蔽）

setTimeout(() => {
  try {
    tempApi.getProfile();  // TypeError: Cannot perform 'get' on a proxy that has been revoked
  } catch (e) {
    console.log(e.message);
  }
}, 2500);

// 主动撤销
// revoke();

5.9 单例模式代理

// 文件名: singleton-proxy.js
// 运行方式: node singleton-proxy.js

/**
 * 通过 Proxy 实现"任意类自动单例"
 * 不修改原类代码，仅包装构造函数
 */

function singletonize(ClassDef) {
  let instance = null;
  return new Proxy(ClassDef, {
    construct(target, args, newTarget) {
      if (!instance) {
        instance = Reflect.construct(target, args, newTarget);
      }
      return instance;
    }
  });
}

class Database {
  constructor(name) {
    this.name = name;
    this.connections = 0;
    console.log(`Creating database: ${name}`);
  }
  connect() {
    this.connections++;
    return `Connected to ${this.name} (${this.connections} times)`;
  }
}

const SingletonDB = singletonize(Database);

const db1 = new SingletonDB('MySQL');  // Creating database: MySQL
const db2 = new SingletonDB('PostgreSQL');  // 不再创建
console.log(db1 === db2);  // true
console.log(db1.name);  // MySQL（不是 PostgreSQL）
console.log(db1.connect());  // Connected to MySQL (1 times)
console.log(db2.connect());  // Connected to MySQL (2 times)

5.10 ORM 模型代理

// 文件名: orm-proxy.js
// 运行方式: node orm-proxy.js

/**
 * 简化版 ORM：通过 Proxy 拦截属性访问实现懒加载
 */

class Model {
  constructor(table, primaryValue) {
    this._table = table;
    this._primaryValue = primaryValue;
    this._loaded = false;
    this._data = {};
  }

  _load() {
    if (this._loaded) return;
    // 模拟数据库查询
    console.log(`[SQL] SELECT * FROM ${this._table} WHERE id = ${this._primaryValue}`);
    if (this._table === 'users') {
      this._data = { id: this._primaryValue, name: 'Alice', age: 30, email: 'a@b.com' };
    } else if (this._table === 'posts') {
      this._data = { id: this._primaryValue, title: 'Hello', authorId: 1 };
    }
    this._loaded = true;
  }

  _save() {
    if (!this._loaded) return;
    console.log(`[SQL] UPDATE ${this._table} SET ${JSON.stringify(this._data)} WHERE id = ${this._primaryValue}`);
  }
}

function lazyModel(table, primaryValue) {
  const model = new Model(table, primaryValue);

  return new Proxy(model, {
    get(target, key, receiver) {
      // 内部方法直接返回
      if (typeof key === 'string' && key.startsWith('_')) {
        return Reflect.get(target, key, receiver);
      }
      // 首次访问触发加载
      target._load();
      return Reflect.get(target._data, key);
    },
    set(target, key, value, receiver) {
      if (typeof key === 'string' && key.startsWith('_')) {
        return Reflect.set(target, key, value, receiver);
      }
      target._load();
      const result = Reflect.set(target._data, key, value);
      target._save();  // 自动保存
      return result;
    }
  });
}

// 演示
const user = lazyModel('users', 1);
console.log(user.name);  // [SQL] SELECT * FROM users WHERE id = 1
                         // Alice
console.log(user.age);   // 30（不再触发 SQL）
user.age = 31;           // [SQL] UPDATE users SET {"id":1,"name":"Alice","age":31,"email":"a@b.com"} WHERE id = 1

5.11 RPC 透明调用代理

// 文件名: rpc-proxy.js
// 运行方式: node rpc-proxy.js

/**
 * 基于 Proxy 的 RPC 客户端：将远程方法调用映射为本地对象
 * 支持任意层级的属性访问与方法调用
 */

class RPCClient {
  constructor(endpoint) {
    this.endpoint = endpoint;
    this.timeout = 5000;
  }

  async _call(path, args) {
    console.log(`[RPC] POST ${this.endpoint}/${path.join('.')} body=${JSON.stringify(args)}`);
    // 模拟网络请求
    await new Promise(r => setTimeout(r, 50));
    return { ok: true, path, args };
  }

  _createProxy(path = []) {
    const self = this;
    return new Proxy(function () {}, {
      get(target, key) {
        if (typeof key !== 'string') return undefined;
        return self._createProxy([...path, key]);
      },
      apply(target, thisArg, args) {
        return self._call(path, args);
      }
    });
  }

  get api() {
    return this._createProxy();
  }
}

const client = new RPCClient('https://api.example.com/rpc');

(async () => {
  // 等价于：调用远程 users.list({ page: 1 })
  const result = await client.api.users.list({ page: 1 });
  console.log(result);
  // [RPC] POST https://api.example.com/rpc/users.list body=[{"page":1}]
  // { ok: true, path: ['users', 'list'], args: [{ page: 1 }] }

  // 调用 posts.create({ title: 'Hello' })
  await client.api.posts.create({ title: 'Hello' });
})();

5.12 不可变数据代理（Immer 风格）

// 文件名: immer-lite.js
// 运行方式: node immer-lite.js

/**
 * 基于 Proxy 的不可变数据更新：Copy-on-Write
 */

const PROXY_STATE = Symbol('proxy-state');

class ImmerState {
  constructor(base, parent) {
    this.base = base;          // 原始对象
    this.copy = undefined;     // 修改后的副本
    this.parent = parent;      // 父状态
    this.modified = false;     // 是否被修改
  }

  // 取当前值：优先 copy，其次 base
  get value() {
    return this.copy ?? this.base;
  }

  // 确保有 copy（首次修改时触发）
  ensureCopy() {
    if (!this.copy) {
      this.copy = Array.isArray(this.base) ? [...this.base] : { ...this.base };
      this.modified = true;
    }
    return this.copy;
  }
}

function createProxy(base, parent) {
  const state = new ImmerState(base, parent);

  const proxy = new Proxy(base, {
    get(target, key, receiver) {
      if (key === PROXY_STATE) return state;
      const currentValue = state.value[key];
      // 嵌套对象：递归创建子代理
      if (typeof currentValue === 'object' && currentValue !== null) {
        return createProxy(currentValue, state);
      }
      return currentValue;
    },
    set(target, key, value, receiver) {
      const copy = state.ensureCopy();
      // 若 value 是代理，取其内部值
      const rawValue = value && value[PROXY_STATE]
        ? value[PROXY_STATE].value
        : value;
      copy[key] = rawValue;
      return true;
    },
    has(target, key) {
      return key in state.value;
    },
    ownKeys(target) {
      return Reflect.ownKeys(state.value);
    }
  });

  return proxy;
}

// 从根状态收集所有修改，返回新对象
function finalize(state) {
  if (!state.modified) return state.base;

  const result = Array.isArray(state.base) ? [...state.copy] : { ...state.copy };

  // 递归 finalize 嵌套的子状态
  for (const key of Object.keys(result)) {
    const child = result[key];
    if (child && child[PROXY_STATE]) {
      result[key] = finalize(child[PROXY_STATE]);
    }
  }

  Object.freeze(result);
  return result;
}

function produce(state, recipe) {
  const rootState = new ImmerState(state, null);
  const proxy = createProxy(state, rootState);
  recipe(proxy);
  return finalize(rootState);
}

// 演示
const original = {
  name: 'Alice',
  age: 30,
  address: { city: 'Beijing', zip: '100000' },
  hobbies: ['reading', 'coding']
};

const next = produce(original, draft => {
  draft.age = 31;
  draft.address.city = 'Shanghai';
  draft.hobbies.push('travel');
});

console.log(original);
// { name: 'Alice', age: 30, address: { city: 'Beijing', zip: '100000' }, hobbies: ['reading', 'coding'] }

console.log(next);
// { name: 'Alice', age: 31, address: { city: 'Shanghai', zip: '100000' }, hobbies: ['reading', 'coding', 'travel'] }

console.log(original !== next);                    // true
console.log(original.address !== next.address);    // true（被修改的部分）
console.log(original.name === next.name);          // true（未修改的引用共享）

5.13 类型系统代理（运行时类型守卫）

// 文件名: typed-proxy.js
// 运行方式: node typed-proxy.js

/**
 * 运行时类型检查代理：基于 TypeScript 类型定义生成校验代理
 * 类似 zod / io-ts 的功能，但通过 Proxy 实现
 */

function typed(typeDef) {
  return function (obj) {
    return new Proxy(obj, {
      get(target, key, receiver) {
        const value = Reflect.get(target, key, receiver);
        const expectedType = typeDef[key];
        if (expectedType && value !== undefined && value !== null) {
          const actualType = Array.isArray(value) ? 'array' : typeof value;
          if (actualType !== expectedType) {
            console.warn(`Type mismatch: ${String(key)} expected ${expectedType}, got ${actualType}`);
          }
        }
        return value;
      },
      set(target, key, value, receiver) {
        const expectedType = typeDef[key];
        if (expectedType && value !== undefined && value !== null) {
          const actualType = Array.isArray(value) ? 'array' : typeof value;
          if (actualType !== expectedType) {
            throw new TypeError(`${String(key)} expected ${expectedType}, got ${actualType}`);
          }
        }
        return Reflect.set(target, key, value, receiver);
      }
    });
  };
}

const User = typed({
  name: 'string',
  age: 'number',
  tags: 'array',
  active: 'boolean'
});

const u = User({ name: 'Alice', age: 30, tags: ['a', 'b'], active: true });
u.name = 'Bob';
u.age = 31;
try {
  u.age = 'old';  // TypeError
} catch (e) {
  console.log(e.message);
}

6. 对比分析

6.1 主流响应式方案对比

6.2 Proxy vs Object.defineProperty vs Reflect

// 三种元编程方案的对比

// 方案 1：Object.defineProperty（ES5）
function definePropertyReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() { return val; },
    set(newVal) { val = newVal; }
  });
}

// 方案 2：Proxy + Reflect（ES6+）
function proxyReactive(obj) {
  return new Proxy(obj, {
    get(t, k, r) { return Reflect.get(t, k, r); },
    set(t, k, v, r) { return Reflect.set(t, k, v, r); }
  });
}

// 方案 3：纯 Reflect（无代理，用于转发）
function reflectAccess(obj, key) {
  return Reflect.get(obj, key);
}

6.3 Proxy 与其他语言元编程对比

6.4 框架使用模式对比

// Vue3 风格：全局响应式，effect 自动收集
const state = reactive({ count: 0 });
effect(() => { console.log(state.count); });

// MobX 风格：observable + observer
const state = observable({ count: 0 });
autorun(() => { console.log(state.count); });

// Solid 风格：编译期信号
const [count, setCount] = createSignal(0);
createEffect(() => { console.log(count()); });

// Immer 风格：不可变更新
const next = produce(state, draft => { draft.count++; });

6.5 Reflect API 速查表

7. 常见陷阱与反模式

7.1 陷阱 1：忘记传递 receiver 导致 setter this 错误

问题：

const parent = {
  _name: 'parent',
  get name() { return this._name; }
};

const child = Object.create(parent);
child._name = 'child';

const proxy = new Proxy(parent, {
  get(target, key) {
    // 错误：未传递 receiver，getter 的 this 是 target 而非 proxy
    return Reflect.get(target, key);
  }
});

const proxyChild = Object.create(proxy);
proxyChild._name = 'child';

console.log(proxyChild.name);  // 'parent'（错误，应为 'child'）

修正：

const proxy = new Proxy(parent, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver);  // 传递 receiver
  }
});
console.log(proxyChild.name);  // 'child'（正确）

7.2 陷阱 2：直接修改 target 绕过代理

问题：

const target = { count: 0 };
const proxy = new Proxy(target, {
  set(t, k, v, r) {
    console.log(`[set] ${k} = ${v}`);
    return Reflect.set(t, k, v, r);
  }
});

proxy.count = 1;  // 触发 [set]
target.count = 2;  // 不触发 [set]（绕过代理）
console.log(proxy.count);  // 2

修正：避免保留对 target 的引用，仅暴露 proxy。

function createReactive(initial) {
  const target = { ...initial };
  const proxy = new Proxy(target, { /* ... */ });
  return proxy;  // 不返回 target
}

7.3 陷阱 3：循环引用导致无限递归

问题：

const state = reactive({ a: { b: null } });
state.a.b = state;  // 循环引用
// 后续访问 state.a.b.a.b.a.b... 会无限递归创建代理

修正：使用 WeakMap 缓存确保每个对象只代理一次（已在 5.2 中实现）。

7.4 陷阱 4：has 陷阱对 Symbol 处理不当

问题：

const proxy = new Proxy({ a: 1 }, {
  has(target, key) {
    // 若 key 是 Symbol（如 Symbol.iterator），可能被错误处理
    return typeof key === 'string' && key in target;
  }
});

for (const x of proxy) {  // TypeError: proxy is not iterable
  // ...
}

修正：保留 Symbol 的默认行为。

const proxy = new Proxy({ a: 1 }, {
  has(target, key) {
    if (typeof key === 'symbol') {
      return Reflect.has(target, key);  // 默认行为
    }
    return key in target;
  }
});

7.5 陷阱 5：ownKeys 必须返回数组且符合不变式

问题：

const target = { a: 1, b: 2 };
Object.defineProperty(target, 'c', { value: 3, configurable: false });

const proxy = new Proxy(target, {
  ownKeys() {
    return ['a', 'b'];  // 缺少不可配置的 'c'
  }
});

Object.keys(proxy);  // TypeError: 'ownKeys' on proxy: trap returned result that did not include non-configurable keys

修正：始终包含不可配置的属性。

const proxy = new Proxy(target, {
  ownKeys(t) {
    const keys = Reflect.ownKeys(t);
    // 仅过滤可配置的 key
    return keys.filter(k => {
      const desc = Reflect.getOwnPropertyDescriptor(t, k);
      return desc?.configurable !== false ? true : true;  // 不可配置的必须保留
    });
  }
});

7.6 陷阱 6：性能反模式——热路径使用 Proxy

问题：

// 反模式：对每帧渲染的状态使用 Proxy
const renderState = reactive({
  pixels: new Uint8Array(1920 * 1080 * 4),
  position: { x: 0, y: 0 }
});

function render() {
  // 每帧访问 pixels 数万次，每次都走 Proxy 路径
  for (let i = 0; i < renderState.pixels.length; i++) {
    renderState.pixels[i] = Math.random() * 255;
  }
  requestAnimationFrame(render);
}
render();

修正：热点路径直接操作原始数据。

const raw = renderState[RAW_SYMBOL];  // 获取原始对象
for (let i = 0; i < raw.pixels.length; i++) {
  raw.pixels[i] = Math.random() * 255;
}
// 完成后触发更新
trigger(raw, 'pixels');

7.7 陷阱 7：冻结对象代理的不变式冲突

问题：

const frozen = Object.freeze({ x: 1 });
const proxy = new Proxy(frozen, {
  set() { return true; }  // 谎报成功
});

proxy.x = 2;  // TypeError: 'set' on proxy: trap returned truish for property 'x' which is non-writable and non-configurable

修正：陷阱返回值必须遵守不变式。

const proxy = new Proxy(frozen, {
  set(t, k, v, r) {
    return Reflect.set(t, k, v, r);  // 自然返回 false
  }
});
proxy.x = 2;  // 静默失败（非严格模式）或 TypeError（严格模式）

7.8 陷阱 8：this 指向问题

问题：

class Counter {
  constructor() { this.count = 0; }
  increment() { this.count++; }
}

const counter = new Proxy(new Counter(), {
  get(target, key, receiver) {
    return Reflect.get(target, key);  // 未传 receiver
  }
});

counter.increment();  // TypeError: Cannot read property 'count' of undefined

原因：increment 方法内的 this 是 proxy（receiver），但 Reflect.get 未传 receiver，导致方法绑定到 target。

修正：

const counter = new Proxy(new Counter(), {
  get(target, key, receiver) {
    const value = Reflect.get(target, key, receiver);
    if (typeof value === 'function') {
      return value.bind(receiver);  // 显式绑定 this
    }
    return value;
  }
});

counter.increment();  // 正常

7.9 陷阱 9：JSON.stringify 不触发 get 陷阱

const proxy = new Proxy({ a: 1 }, {
  get(t, k, r) {
    console.log(`[get] ${String(k)}`);
    return Reflect.get(t, k, r);
  }
});

JSON.stringify(proxy);  // 不输出 [get]，因为 JSON.stringify 走内部 [[OwnPropertyKeys]] + [[GetOwnProperty]] + 直接读取

修正：若需在 JSON 序列化时拦截，需实现 toJSON 方法或自定义 getOwnPropertyDescriptor。

7.10 陷阱 10：Map/Set 代理的迭代器问题

const proxy = new Proxy(new Map([['a', 1]]), {
  get(t, k, r) {
    console.log(`[get] ${String(k)}`);
    return Reflect.get(t, k, r);
  }
});

// Map.prototype.entries 等方法的 this 绑定问题
proxy.entries();  // 可能抛出 "Method Map.prototype.entries called on incompatible receiver"

修正：绑定方法到原始对象，或使用 wrapper。

const proxy = new Proxy(new Map([['a', 1]]), {
  get(t, k, r) {
    const value = Reflect.get(t, k, r);
    if (typeof value === 'function') {
      return value.bind(t);  // 绑定到原始 Map
    }
    return value;
  }
});

8. 工程最佳实践

8.1 Proxy 使用决策树

是否需要拦截对象操作？
├── 否 → 直接使用原始对象
└── 是
    ├── 需要监听属性访问/修改？
    │   ├── 仅已知属性 → Object.defineProperty
    │   └── 任意属性（含新增）→ Proxy
    ├── 需要监听函数调用？
    │   └── Proxy 的 apply 陷阱
    ├── 需要监听 new 操作？
    │   └── Proxy 的 construct 陷阱
    ├── 需要临时授权（可撤销）？
    │   └── Proxy.revocable
    └── 需要监听集合类型（Map/Set）？
        └── Proxy + 方法绑定

8.2 性能基准测试工具

// 文件名: proxy-benchmark.js
// 运行方式: node proxy-benchmark.js

/**
 * Proxy 性能基准测试
 */

function bench(label, fn, iterations = 1_000_000) {
  // 预热
  for (let i = 0; i < 1000; i++) fn();

  const start = performance.now();
  for (let i = 0; i < iterations; i++) fn();
  const end = performance.now();

  const total = end - start;
  const perOp = (total * 1000) / iterations;
  console.log(`${label}: ${total.toFixed(2)}ms total, ${perOp.toFixed(3)}μs/op`);
  return { total, perOp };
}

const obj = { x: 1, y: 2, z: 3 };
const proxyObj = new Proxy(obj, {
  get(t, k, r) { return Reflect.get(t, k, r); },
  set(t, k, v, r) { return Reflect.set(t, k, v, r); }
});

bench('Direct read', () => { obj.x; });
bench('Proxy read', () => { proxyObj.x; });
bench('Reflect.get', () => { Reflect.get(obj, 'x'); });

bench('Direct write', () => { obj.x = 2; });
bench('Proxy write', () => { proxyObj.x = 2; });

const fn = (a, b) => a + b;
const proxyFn = new Proxy(fn, {
  apply(t, thisArg, args) { return Reflect.apply(t, thisArg, args); }
});

bench('Direct call', () => { fn(1, 2); });
bench('Proxy call', () => { proxyFn(1, 2); });