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

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

前言

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的作用。