当前位置：首页 > news >正文

手摸手还原vue3中reactive的get陷阱以及receiver的作用

news 来源：原创 2025/6/6 11:17:34

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、实例是什么？
二、new Prxoy
三、实现代码
- 1.引入代码
- 2.读入数据
总结

前言

receiver不是为解决get陷阱而生，而是为解决Proxy中的this绑定问题而存在的机制。
在这里插入图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

一、实例是什么？

在JavaScript中，实例是通过构造函数或类创建的具体对象，例如：

new Proxy() 创建了一个Proxy实例
obj 就是reactive函数返回的Proxy实例
每次调用reactive()都会创建一个新的独立实例

在这里插入图片描述

二、new Prxoy

// 创建Proxy实例
const reactive = fn => {// new Proxy()会创建一个Proxy实例return new Proxy(fn, {get (target, key, receiver) {// 避免打印导致递归if (key === 'name' || key === 'age') {console.log('访问属性:', target, key, receiver)}return target[key]},set (target, key, receiver) {console.log('set')}})
}// obj是reactive函数返回的Proxy实例
const obj = reactive({name: 'zhangsan',age: 18
})

从运行结果可以看出：

实例特点：

当访问obj.name时，触发了Proxy的get陷阱，console.log显示：

target是原始对象{name: ‘zhangsan’, age: 18}
key是被访问的属性名’name’
receiver是Proxy实例本身

Proxy实例的特殊行为：

拦截了对属性的访问(get)和修改(set)
保持了原始对象(target)和代理对象(receiver)的区分

3.实例的核心概念：

是类的具体实现
拥有独立的内存空间
可以调用类或构造函数定义的方法

三、实现代码

1.引入代码

代码如下（示例）：

// 创建Proxy实例
const reactive = fn => {// new Proxy()会创建一个Proxy实例return new Proxy(fn, {// get陷阱：拦截属性访问// target: 被代理的原始对象// key: 被访问的属性名 // receiver: 最初被调用的对象(通常是Proxy实例)，解决this绑定问题get (target, key, receiver) {// 避免打印导致递归if (key === 'name' || key === 'age') {console.log('访问属性:', key)console.log('get陷阱触发')}// Reflect.get使用receiver确保正确的this绑定return Reflect.get(target, key, receiver)},set (target, key, receiver) {console.log('set')}})
}// obj是reactive函数返回的Proxy实例
const obj = reactive({name: 'zhangsan',age: 18
})// 演示receiver的作用
const child = { __proto__: obj, childProp: 'child' }
console.log('obj.name',obj.name) // receiver是obj
console.log('child.name',child.name) // receiver是child
obj.name = 'lisi'