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

news2025/6/6 8:40:36

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

文章目录

前言
一、实例是什么？
二、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'