Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造函数，通过代理层实现数据劫持；支持 13 种 trap，如 get、set、has、deleteProperty、ownKeys 等；可天然监听动态属性、数组操作及嵌套对象，但需手动处理深层响应式与数组方法；相比 Object.defineProperty，Proxy 更强大灵活，但不兼容 IE。
Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造函数，它不是直接修改对象本身，而是创建一个“代理层”，让所有对目标对象的访问都经过这个中间层——这正是实现数据劫持的核心机制。
Proxy 能拦截哪些操作？
Proxy 支持 13 种可拦截的操作（trap），常用包括：
get：读取属性时触发，适合监听依赖收集（如 Vue 响应式） set：设置属性时触发，适合响应式更新、数据校验、自动转换 has：in 操作符触发，可隐藏属性 deleteProperty：delete 操作触发，控制删除权限 ownKeys：Object.keys / for…in 触发，可过滤或添加枚举属性
用 Proxy 实现基础响应式数据劫持
与 Object.defineProperty 不同，Proxy 可以监听动态新增/删除属性、数组索引赋值、length 修改等，天然支持数组和嵌套对象。
简单示例：拦截 set/get，打印变化并触发更新函数：
立即学习“Java免费学习笔记（深入）”；
function reactive(obj, onUpdate) { return new Proxy(obj, { get(target, key, receiver) { console.log(`读取 ${key}`); return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { console.log(`设置 ${key} =`, value); const result = Reflect.set(target, key, value, receiver); onUpdate && onUpdate(); // 触发视图更新 return result; } });}const state = reactive({ count: 0 }, () => console.log('视图需刷新'));state.count++; // 输出：设置 count = 1 → 视图需刷新
注意深层响应式与陷阱
Proxy 默认只代理第一层。要实现嵌套对象响应式，需在 get 中递归代理：
每次 get 返回值是对象时，自动 wrap 一层 Proxy（避免重复代理，可用 WeakMap 缓存） set 时若新值是对象，也要递归 reactive 它 数组方法如 push/pop 会触发 set（如修改 length）或 ownKeys（影响 for…in），但不会触发 set(index)，需额外处理或重写数组方法 Proxy 无法拦截普通函数调用、instanceof、typeof 等操作，这些需配合其他手段（如封装函数、使用 Reflect）
Proxy vs Object.defineProperty 的关键区别
Proxy 代理整个对象，defineProperty 只能逐个属性定义 Proxy 支持数组索引、length、新增属性的劫持；defineProperty 对数组索引无效，新增属性需重新 define Proxy 有更丰富的拦截能力（如 construct、apply），适合实现类、函数代理 兼容性：Proxy 不支持 IE，需考虑项目环境；defineProperty 兼容性更好（IE9+）
基本上就这些。Proxy 让数据劫持变得更自然、更彻底，现代响应式框架（Vue 3、SolidJS）都基于它构建核心响应系统。不复杂但容易忽略的是：它只是“拦截器”，真正驱动更新还需要依赖收集、副作用调度等配套设计。
以上就是javascript中的Proxy是什么_如何用它实现数据劫持的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543566.html
微信扫一扫 
支付宝扫一扫 
