JavaScript中的代理是什么_它如何拦截和自定义对象操作呢

狼影 2025-12-18 00:00:00 次阅读

Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的代理机制，通过 handler 中的 trap（如 get、set、has 等）控制访问行为，支持响应式、验证、日志等场景，但不递归代理嵌套对象且有性能开销。

JavaScript 中的代理（Proxy）是一个包装对象，用来拦截并自定义对目标对象的基本操作——比如读取属性、赋值、调用方法、检查是否存在某个属性等。它不改变原对象，而是在访问原对象前加一层“中间人”，让你能精确控制每一次交互。

代理的核心：handler 和 trap

创建 Proxy 需要两个参数：目标对象（target）和处理器对象（handler）。handler 里定义各种“陷阱”（trap），每个 trap 对应一种对象操作。只要触发了对应操作，就会执行你写的逻辑。

get：拦截读取属性，例如 obj.x 或 obj['x']
set：拦截设置属性，例如 obj.x = 1；可返回 true 表示成功，否则抛错（严格模式下）
has：拦截 in 操作符，例如 'x' in obj
deleteProperty：拦截 delete obj.x
apply：拦截函数调用（当 target 是函数时）
construct：拦截 new 调用（当 target 是构造函数时）

一个实用例子：带验证的响应式对象

假设你想让对象在被赋值时自动校验类型：

const person = {};
const proxy = new Proxy(person, {
  set(target, key, value) {
    if (key === 'age' && typeof value !== 'number') {
      throw new Error('age 必须是数字');
    }
    target[key] = value;
    console.log(`已设置 ${key}:`, value);
    return true;
  },
  get(target, key) {
    console.log(`正在读取 ${key}`);
    return target[key];
  }
});

proxy.name = '张三'; // ✅ 输出：已设置 name: 张三
proxy.age = 25;      // ✅ 输出：已设置 age: 25
proxy.age = '二十';  // ❌ 抛出错误
console.log(proxy.name); // ✅ 输出：正在读取 name → 张三

注意几个关键细节

Proxy 只代理**直接操作**，不会递归代理嵌套对象——想深度代理，得在 get 中对返回值再套一层 Proxy
不能代理某些内置对象的内部方法（如 Array.prototype.push 的底层行为），但可以代理其调用过程
使用 Reflect 配合 trap 更安全，比如 Reflect.set(target, key, value) 替代直接赋值，它会正确处理原型链和 setter
代理对象与原对象不相等：proxy === person 是 false；但它们的属性和行为一致（除非你主动修改）