当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptProxy是什么？如何使用？

JavaScriptProxy是什么？如何使用？

2026-02-06 19:05:39 0浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《JavaScript Proxy 是什么？如何拦截对象操作？》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

Proxy是JavaScript中唯一能真正拦截并重写基本操作的机制，通过trap函数接管[[Get]]、[[Set]]等内部方法，需用new Proxy(target, handler)创建，无法代理原始值且仅代理第一层。

javascript Proxy是什么_它如何拦截并自定义对象的操作【教程】

Proxy 不是语法糖，也不是对象增强工具，它是 JavaScript 中唯一能真正拦截并重写基本操作（如读取、赋值、in、delete）的机制。

Proxy 的核心作用：拦截对象的底层操作

当你对一个对象做 obj.prop、obj.prop = value、prop in obj、delete obj.prop 或 Object.keys(obj) 这类操作时，JavaScript 引擎会触发对应的内部方法（如 [[Get]]、[[Set]]、[[HasProperty]]）。Proxy 就是通过 trap（陷阱）函数把这些内部方法的调用接管过来。

关键点：

必须用 new Proxy(target, handler) 创建新对象，不能直接修改原对象行为
target 可以是普通对象、数组、函数甚至 null（但多数 trap 会报错）
handler 是一个普通对象，键名是 trap 名（如 get、set、has），值是对应函数
没定义的 trap 会默认转发到 target，不会自动“透传”——这点常被忽略

最常用的 get 和 set 陷阱怎么写

get 和 set 是使用频率最高的两个 trap，但它们的参数和返回值有明确约定，写错会导致静默失败或无限递归。

常见错误：

在 get 中直接访问 target[prop] 而不通过 Reflect.get()，可能绕过其他 trap 或丢失 receiver
在 set 中忘记返回布尔值（必须返回 true 表示成功，否则严格模式下抛 TypeError）
误以为 set 的第三个参数 receiver 总是 proxy 本身——它可能是继承链上的子对象

正确写法示例：

const obj = { count: 0 };
const proxy = new Proxy(obj, {
  get(target, prop, receiver) {
    console.log('读取', prop);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log('设置', prop, '为', value);
    return Reflect.set(target, prop, value, receiver); // 必须返回 boolean
  }
});