17370845950

Proxy是唯一能全面拦截对象动态操作的机制，Reflect是其拦截器中必须配合使用的默认行为实现，直接操作target会破坏属性描述符、getter/setter绑定和receiver语义。

Proxy 是 JavaScript 中唯一能**全面拦截对象动态操作**的机制；Reflect 不是辅助工具，而是 Proxy 拦截器里**必须配合使用的默认行为实现**。不用 Reflect，几乎必然破坏原型链、getter/setter 的 this 绑定，或让私有字段（#field）直接报错。

为什么 set/get 拦截里必须用 Reflect.set() 和 Reflect.get()

直接写 target[prop] = value 或 target[prop] 看似省事，但会绕过三类关键语义：

• 属性描述符：比如 writable: false 的属性，target[prop] = value 会静默失败（非严格模式）或抛错（严格模式），而 Reflect.set() 明确返回 false，让你可控处理
• 访问器（getter/setter）：直接赋值不触发 setter 内部逻辑，this 也指向 target 而非代理对象，导致像 this._name 读写错乱
• receiver 参数缺失：这是 Vue/MobX 响应式依赖收集的关键。不用 Reflect.get(target, prop, receiver)，继承链上的 getter 就查不到、Symbol 属性可能漏掉、私有字段直接 throw

正确写法：

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.newField = 1 —— defineProperty 对它完全没反应
• 数组索引赋值：arr[0] = 'x' —— 数组长度变化、索引写入均无法捕获
• in 操作符：'x' in obj —— defineProperty 不提供对应钩子
• 删除属性：delete obj.x —— 必须用 deleteProperty trap
• 枚举行为：for...in、Object.keys() —— 需要 ownKeys + getOwnPropertyDescriptor

Proxy 共支持 13 种 trap，覆盖所有基本操作；Object.defineProperty 只能监听已有属性的读写。

如何用 Proxy + Reflect 实现一个带类型校验的只读代理

“只读”不是只拦 set 就完事。用户还能删属性、加新属性、改原型，甚至冻结对象——这些都得一并堵住：

• 必须拦截：set、deleteProperty、defineProperty、preventExtensions、setPrototypeOf
• 类型校验放在 set 里，但赋值动作仍交由 Reflect.set() 执行，否则属性描述符（如 configurable）失效
• get 中继续用 Reflect.get()，确保访问器、Symbol、继承属性全部正常

示例（简化版）：

function typedReadOnly(obj, schema = {}) {
  return new Proxy(obj, {
    set(target, key, value) {
      if (schema[key] && typeof value !== schema[key]) {
        throw new TypeError(`Expected ${schema[key]} for ${key}, got ${typeof value}`);
      }
      return Reflect.set(target, key, value);
    },
    deleteProperty() { throw new Error('Cannot delete property on read-only object'); },
    defineProperty() { throw new Error('Cannot define property on read-only object'); },
    preventExtensions() { return true; },
    setPrototypeOf() { return false; }
  });
}

容易被忽略的边界：Reflect 方法全都不抛异常，且返回值有明确语义

Reflect.deleteProperty(obj, 'x') 返回 tr

ue/false，不是抛错；Reflect.has(obj, 'x') 比 'x' in obj 更可靠——它不会意外触发原型上 getter 的副作用。

更关键的是：Reflect.construct() 是唯一能控制 new.target 的方式，想安全继承 Array 或 Map 必须用它；Reflect.apply(fn, thisArg, args) 比 fn.apply() 更适合在代理中做函数调用转发。

这些不是“锦上添花”，而是你在写生产级代理时，绕不开的语义细节。