理解 JavaScript Proxy：陷阱、Reflect 与响应式模式

了解 JavaScript 的 Proxy 和 Reflect 对象如何拦截属性访问，从而实现验证功能、虚拟属性以及响应式框架。

1096 词

每当你编写 obj.property 或使用 obj.property = value 为其赋值时，其实都在依赖 JavaScript 在背后默默执行的操作，而这种机制并没有内置方式来观察或修改其内部过程。Proxy 对象彻底打破了这一假设。它允许你包裹目标对象，并在读取、写入、删除等基本操作生效之前进行拦截。正是这种拦截机制，成为许多现代 JavaScript 库和工具中那些看似“神奇”的功能的真正核心。

能够拦截一切操作的包装器

Proxy 位于你的代码与它所包裹的对象之间，通过一组陷阱函数来决定对它执行的每种操作究竟会发生什么。

const config = { retries: 3, timeout: 5000 };

const guardedConfig = new Proxy(config, {
  set(target, key, value) {
    if (key === "retries" && (typeof value !== "number" || value < 0)) {
      throw new TypeError("retries must be a non-negative number");
    }
    target[key] = value;
    return true;
  },
});

guardedConfig.retries = 5;   // works fine
guardedConfig.retries = -1;  // throws TypeError, caught before it ever reaches the object

编写 guardedConfig.retries = 5 的方式与普通的属性赋值并无不同。这正是该设计的目的：在调用处让拦截操作保持不可见。你可以在看似普通的属性访问之上添加验证、日志记录或其他副作用，而无需对实际使用该对象的代码进行任何修改。

响应式框架背后的机制

function reactive(target, onChange) {
  return new Proxy(target, {
    get(obj, key) {
      return obj[key];
    },
    set(obj, key, value) {
      const changed = obj[key] !== value;
      obj[key] = value;
      if (changed) onChange(key, value);
      return true;
    },
  });
}

const state = reactive({ count: 0 }, (key, value) => {
  console.log(`${key} changed to ${value}, re-rendering...`);
});

state.count = 1; // "count changed to 1, re-rendering..." — no explicit call needed

写入 state.count = 1 看起来就像是一句完全普通的赋值语句，因为从语法上讲确实如此。使其具有意义的是 set 陷阱，它将这行看似平常的代码转化为一项系统其他部分可以响应的事件。这才是反应式框架所依赖的真正基础。无需在所有地方都使用某种特殊的“可观察”数据类型，其实只需要用 Proxy 包装普通对象，即可悄无声息地检测对它们的每一次写入操作。

虚拟属性：仅在被请求时才存在的值

get 陷阱可以返回实际上从未存储在底层目标中的值，这意味着你可以将计算得到的或派生出的值当作普通属性来使用。

const product = { name: "Desk Lamp", priceCents: 3499 };

const productView = new Proxy(product, {
  get(target, key) {
    if (key === "priceDollars") {
      return (target.priceCents / 100).toFixed(2);
    }
    return target[key];
  },
});

console.log(productView.priceDollars); // "34.99" — computed on read, not stored anywhere

在product对象中没有任何priceDollars字段。它是在每次被访问时，通过get陷阱动态生成的。这与在类或对象字面量中用get方法编写的getter有本质区别，因为Proxy陷阱能够拦截对那些事先从未声明过的键的访问。例如，当您希望在不修改原始数据的情况下为API响应添加额外的计算字段时，这种机制非常有用。

为何`Reflect`常与`Proxy`一同出现

对于那些首次编写需要回退到默认行为的陷阱的人来说，存在一个容易被忽视的细节。用简单的方式实现这一点很容易出现细微错误。

const handler = {
  get(target, key) {
    console.log(`reading ${key}`);
    return target[key]; // works, but loses some edge-case correctness
  },
};

对于简单的普通对象，这种做法大多可行，但将操作转发为其默认行为的更安全、更正确的方式是通过Reflect。它会为每种陷阱提供一个函数，该函数能完全复制原操作，同时保留正确的this绑定，并妥善处理诸如继承的getter之类的复杂情况。

const handler = {
  get(target, key, receiver) {
    console.log(`reading ${key}`);
    return Reflect.get(target, key, receiver);
  },
};

调用 Reflect.get(target, key, receiver) 所产生的效果与普通属性访问完全一致，包括涉及原型以及依赖 this 的获取器的边缘情况，还有那些 target[key] 可能会悄悄返回错误结果的情形。在实际的 Proxy 代码中，除非有意改变默认行为，否则几乎总是会在每个陷阱处理函数内部调用对应的 Reflect 方法，因为这才是能够保证与普通属性访问行为相符的版本。

限制而非扩展功能的陷阱

陷阱不仅可用于添加行为，同样也能移除行为。has 陷阱可以控制 in 运算符返回的结果，而 deleteProperty 陷阱则可以完全阻止删除操作。

const secureRecord = new Proxy(
  { id: 1, ssn: "123-45-6789" },
  {
    get(target, key) {
      if (key === "ssn") throw new Error("Direct access to ssn is not allowed");
      return Reflect.get(target, key);
    },
    deleteProperty() {
      throw new Error("Deleting fields is not allowed on this record");
    },
  }
);

console.log(secureRecord.id); // 1
console.log(secureRecord.ssn); // throws
delete secureRecord.id; // throws

这种保护机制与私有类字段有一个重要区别：它可以应用于任何对象，无需该对象原本就是以类的形式存在的；同时它允许你定义针对特定键的精细规则，这是单一的 #private 修饰符无法实现的。

一个理念，多种陷阱

每一个陷阱其实都在回答同一个问题：当代码试图对这个对象执行这些日常操作时，应当发生什么？读取值、写入值、删除值、检查键是否存在——这些通常都是不可见且自动完成的操作，而 Proxy 则将每一个操作转化为可以观察或重定向的瞬间。反应式状态系统、验证封装器、访问控制层、虚拟计算字段，这些都不是来自不同来源的无关技巧，它们都是基于相同的底层机制构建的，只是针对不同的陷阱而已。