JavaScript 的 Proxy 对象为开发者提供了一种拦截并自定义目标对象基本操作的能力。其中 handler.set() （trap）专门用于捕获对对象属性的赋值行为。与直接修改对象属性不同，通过 set ，你可以在属性值真正写入目标对象之前，插入一层自定义的校验、转换或日志记录逻辑。

handler.set 的核心机制

set 本质上是一个函数，它会在每次尝试为代理对象设置属性值时被调用。这个函数接收四个参数，理解每个参数的作用是掌握 Proxy 赋值拦截的关键。

参数详解：

• target：这是被 Proxy 代理的原始目标对象。在函数内部，对属性的实际操作应当针对 target 进行，而不是代理对象本身，否则可能触发递归调用导致栈溢出。

• property：被设置的属性名，可以是字符串或 Symbol 类型。

• value：试图赋给属性的新值。函数通常会对此值进行加工或校验。

• receiver：指向最初被调用的对象，通常是代理对象本身。当赋值操作通过原型链继承触发时，receiver 参数尤为重要。

返回值要求：

set 必须返回一个布尔值。返回 true 表示属性赋值操作顺利完成；返回 false 则会抛出一个 TypeError 异常（在严格模式下）。这一设计确保了赋值操作的结果可以被明确地判断，为代码的健壮性提供了保障。

语法结构

const proxy = new Proxy(target, {
  set: function(target, property, value, receiver) {
    // 自定义拦截逻辑
    return true; // 或 false
  }
});

知识要点

• set 是拦截属性赋值的函数，而非简单的赋值语句。

• 在严格模式下，set 返回 false 会显式抛出错误，这一点在调试与数据完整性保护中颇具价值。

• receiver 参数在处理原型链继承或与其他代理嵌套使用时，能够准确定位最初被访问的对象。

• 若内部未对 target 进行实际操作，属性值将不会被写入目标对象，这可用于实现“只读”或“虚拟”属性。

• 配合 Reflect.set() 使用，可以更规范地执行默认赋值行为，并自动传递 receiver。

实践示例与解析

示例一：属性值自动转换与格式化

设想一个场景：你正在维护一个用户配置对象，所有表示名称的字段都必须以大写形式存储。与其在每次赋值后手动调用 toUpperCase()，不如通过 set 自动化这一规则。

const userConfig = {
  username: 'GUEST',
  role: 'viewer'
};

const configProxy = new Proxy(userConfig, {
  set: function(target, prop, value) {
    // 个人经验：将数据清洗逻辑前置到代理层，能有效避免业务代码中出现散落的格式化片段。
    if (typeof value === 'string') {
      target[prop] = value.toUpperCase();
    } else {
      target[prop] = value; // 非字符串保持原样
    }
    return true; // 明确指示操作完成
  }
});

configProxy.username = 'alan_wang';
configProxy.department = 'engineering';

console.log(userConfig.username);   // 输出: ALAN_WANG
console.log(userConfig.department); // 输出: ENGINEERING

在这个例子中，任何通过 configProxy 设置的字符串值都会被自动转为大写。代理对象 configProxy 拦截赋值操作，执行转换逻辑后再写入原始对象 userConfig。这样做的好处是，数据格式化规则被集中管理，原始对象 userConfig 仍然保持纯粹的数据状态。

示例二：实现属性赋值的合法性校验

在开发表单处理模块时，常常需要对输入值进行校验。如果校验失败，赋值操作应当被阻止，同时很好能给出明确反馈。

const product = {
  _price: 0
};

const productProxy = new Proxy(product, {
  set: function(target, prop, value) {
    if (prop === 'price') {
      // 个人见解：与其在 setter 中混入大量逻辑，不如利用 Proxy 清晰分离校验与存储。
      if (typeof value !== 'number' || value < 0) {
        console.warn(`[校验失败] 价格必须为非负数字，传入值为: ${value}`);
        return false; // 阻止赋值
      }
      target._price = value;
      console.log(`[赋值成功] 商品价格已更新为: ${value}`);
      return true;
    }
    // 其他属性正常赋值
    target[prop] = value;
    return true;
  }
});

productProxy.price = 99;    // 成功，控制台输出成功信息
productProxy.price = -5;    // 失败，控制台输出警告，原值不变
productProxy.name = '笔记本'; // 其他属性不受影响

console.log(product._price); // 输出: 99

此处 set 充当了守卫的角色。当尝试为 price 属性赋值时，会先校验值是否为非负数。校验失败时返回 false，赋值被静默拒绝（非严格模式下），并辅以控制台警告。这种做法将校验规则与业务数据解耦，提升了代码的可维护性。

示例三：追踪对象变化与属性访问日志

对于需要调试或审计的复杂状态对象，记录每一次属性变更的轨迹非常有帮助。set 是天然的切入点。

const state = {
  counter: 0,
  message: '初始化'
};

const monitoredState = new Proxy(state, {
  set: function(target, prop, value, receiver) {
    const oldValue = target[prop];
    // 执行实际赋值操作，这里借助 Reflect.set 可确保 receiver 正确传递，影响原型链访问。
    const result = Reflect.set(target, prop, value, receiver);
    if (result) {
      console.log(`[状态变更] 属性 "${prop}" 从 "${oldValue}" 修改为 "${value}"`);
    }
    return result;
  }
});

monitoredState.counter = 10;      // 日志：属性 "counter" 从 "0" 修改为 "10"
monitoredState.message = '运行中'; // 日志：属性 "message" 从 "初始化" 修改为 "运行中"

Reflect.set 是执行默认赋值行为的推荐方式，它返回值与 set 要求一致，且能正确处理 receiver。通过结合 Reflect API，可以在保持原始行为的同时，无缝注入额外的副作用（如日志记录）。

关于 receiver 参数的进一步讨论

在日常开发中，receiver 参数容易被忽略，但在涉及继承的场景下，它有着不可替代的作用。假设有一个代理对象被用作另一个对象的原型，当通过子对象设置继承来的属性时，receiver 指向的是子对象而非代理本身。这使得 set 能够正确识别属性赋值的实际目标，从而避免在原型链上产生意外的副作用。

为何优先选用 Proxy 而非 Object.defineProperty？

Object.defineProperty 只能对已存在的属性进行精确控制，且每次新增属性都需要重新定义。Proxy 则能够拦截所有属性（包括未来新增的属性）的操作，提供了更、更灵活的拦截机制。对于需要动态扩展对象行为的场景，Proxy 是更为合适的选择。

浏览器兼容性参考