JavaScriptProxy是什么?如何使用?
时间:2026-02-06 19:05:39 408浏览 收藏
偷偷努力,悄无声息地变强,然后惊艳所有人!哈哈,小伙伴们又来学习啦~今天我将给大家介绍《JavaScript Proxy 是什么?如何拦截对象操作?》,这篇文章主要会讲到等等知识点,不知道大家对其都有多少了解,下面我们就一起来看一吧!当然,非常希望大家能多多评论,给出合理的建议,我们一起学习,一起进步!
Proxy是JavaScript中唯一能真正拦截并重写基本操作的机制,通过trap函数接管[[Get]]、[[Set]]等内部方法,需用new Proxy(target, handler)创建,无法代理原始值且仅代理第一层。

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
}
});
为什么 Object.defineProperty 做不到 Proxy 的事
Object.defineProperty 只能监听**已存在的属性**的读写,且无法拦截 in、delete、for...in、Object.keys()、构造函数调用等行为。
而 Proxy 的 trap 覆盖更广:
has拦截prop in proxydeleteProperty拦截delete proxy.propownKeys拦截Object.getOwnPropertyNames()、for...inapply和construct分别拦截函数调用和new调用getOwnPropertyDescriptor控制Object.getOwnPropertyDescriptor()返回值
注意:ownKeys 返回的必须是数组,且需包含所有 enumerable 为 true 的自有属性(否则 for...in 行为可能异常)。
Proxy 的实际限制和易踩坑点
Proxy 很强大,但不是万能的,几个关键限制常被低估:
- Proxy 对象无法被
===或==与原对象比较相等(它们是不同对象) - 无法代理
undefined、primitive(如字符串、数字),只能代理对象 - 一旦创建,handler 无法被替换;想改行为只能新建 Proxy
- 某些内置方法(如
Array.prototype.push)内部不走标准 [[Set]],而是直接操作索引,导致settrap 可能不触发 - 性能开销明显,尤其高频操作(如循环中大量读写)应谨慎使用
最常被忽略的一点:Proxy 只代理第一层。如果 proxy.nested 是个普通对象,它的操作不会被自动拦截——需要手动递归包装或使用 Proxy.revocable 配合懒代理策略。
以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
262 收藏
-
169 收藏
-
303 收藏
-
181 收藏
-
117 收藏
-
188 收藏
-
188 收藏
-
310 收藏
-
130 收藏
-
403 收藏
-
182 收藏
-
229 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习