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

👨 作者简介：大家好，我是Taro，全栈领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

---

---

前言

receiver不是为解决get陷阱而生，而是为解决Proxy中的this绑定问题而存在的机制。

---

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

一、实例是什么？

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

1. new Proxy() 创建了一个Proxy实例

2. obj 就是reactive函数返回的Proxy实例

3. 每次调用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
})

从运行结果可以看出：

实例特点：

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

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

2. 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'

2.读入数据

从运行结果可以看出Proxy get陷阱和receiver的核心特点：

get陷阱：
是Proxy的核心拦截器，在属性访问时触发

可以自定义属性访问行为（如添加日志）

必须返回属性值（这里通过Reflect.get实现）

receiver的作用：
确保this正确绑定（如继承场景）

在child.name访问时，receiver指向child而非obj

通过Reflect.get(target, key, receiver)保持原型链正确

输出结果分析：
两次"get陷阱触发"分别对应obj.name和child.name访问

"set"日志说明对obj.name的赋值操作被拦截

关键结论：receiver不是为解决get陷阱而生，而是为解决Proxy中的this绑定问题而存在的机制。

---

总结

提示：这里对文章进行总结：
以上就是今天要讲的内容，本文仅仅简单介绍了reactive的使用，其中主要学会区分get陷阱 和 receiver的作用。