javascript Proxy是什么_如何用它拦截对象操作？-js教程-PHP中文网

javascript Proxy是什么_如何用它拦截对象操作？

幻影之瞳

发布： 2025-12-22 22:07:20

原创

182人浏览过

Proxy 是 JavaScript 中用于创建代理对象的构造函数，通过 target 和 handler 拦截并自定义对象操作；支持 get、set、has 等 trap 实现响应式、验证等功能；需配合 Reflect 安全转发，注意仅代理第一层、不可代理原始值等限制。

javascript proxy是什么_如何用它拦截对象操作？

Proxy 是 JavaScript 中用于创建代理对象的构造函数，能拦截并自定义对目标对象的基本操作，比如读取、赋值、删除、调用等。 它不是修改原对象行为的“补丁”，而是包裹一层可编程的中间层，让开发者在不侵入原始逻辑的前提下，实现响应式系统、数据验证、日志记录、访问控制等功能。

Proxy 的基本结构：target + handler

创建 Proxy 需要两个参数：

target：被代理的原始对象（可以是普通对象、数组、函数，甚至 null）；
handler：一个配置对象，里面定义各种“陷阱”（trap），即要拦截的操作及其处理逻辑。

示例：拦截属性读取和设置

const obj = { count: 0 };
const proxy = new Proxy(obj, {
  get(target, prop) {
    console.log(`读取 ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`设置 ${prop} = ${value}`);
    target[prop] = value;
    return true; // 必须返回 true 表示赋值成功
  }
});
proxy.count++; // 输出：读取 count → 设置 count = 1

常用拦截操作（trap）及典型用途

以下是最常使用的几个 trap，每个都对应一种对象操作：

立即学习“Java免费学习笔记（深入）”；

星辰Agent

科大讯飞推出的智能体Agent开发平台，助力开发者快速搭建生产级智能体

404

查看详情

get(target, prop, receiver)：拦截读取属性，可用于响应式依赖收集、默认值兜底（如 obj?.x || 'default' 的轻量替代）；
set(target, prop, value, receiver)：拦截赋值，适合做类型校验、只读限制、变更通知（如 Vue 2 的 defineProperty 替代方案）；
has(target, prop)：拦截 in 操作符，可隐藏属性或模拟稀疏数组；
deleteProperty(target, prop)：拦截 delete obj.prop，实现不可删除属性；
apply(target, thisArg, args)：仅对函数生效，拦截函数调用，可用于日志、节流、参数预处理；
construct(target, args, newTarget)：拦截 new 调用，可控制实例化过程或返回不同对象。

注意边界与常见陷阱

Proxy 强大但有使用限制，忽略这些容易出错：

Proxy 只代理第一层——深层嵌套对象不会自动被拦截，需递归代理或结合 Reflect 使用；
不能代理非对象（如原始值 string/number），但可代理包装对象（new String('a')）；
某些操作必须返回特定值才能成功，例如 set 必须返回 true，has 必须返回布尔值；
避免在 handler 中直接读写 target 的同名属性，否则可能触发无限递归（应通过 Reflect.get() / Reflect.set() 安全转发）；
Proxy 对象不等于原对象：proxy === obj 为 false，且 Object.is(proxy, obj) 也不成立。