理解V3中的proxy和reflect

现有如下面试题

结合GeexCode和Gpt

复制代码
// 这个函数名为onWatch,接受三个参数obj、setBind和getlogger。
// obj是需要进行监视的对象。
// setBind是一个回调函数,用于在设置属性时进行绑定操作。
// getlogger是一个回调函数,用于在获取属性时进行记录操作。

// 在这个函数中,使用了Reflect.get和Reflect.set来间接地访问和修改目标对象的属性
let onWatch= (obj,setBind, getlogger) =>{
    let handler = {
        get(target,property,receiver){
            getlogger(target,property)
            return Reflect.get(target,property,receiver)
            // Reflect.get(target, property, receiver)方法用于获取目标对象中指定属性的值。
            // 它类似于直接使用点运算符或方括号运算符来获取属性的值。
            // 但使用Reflect.get方法可以更加灵活,因为可以使用receiver参数来指定访问属性时的上下文对象。
        },
        set(target,property,value,receiver){
            setBind(value,property)
            return Reflect.set(target,property,value,receiver)
            // Reflect.set(target, property, value, receiver)方法用于设置目标对象中指定属性的值。
            // 它类似于直接使用点运算符或方括号运算符来设置属性的值。
            // 但使用Reflect.set方法可以更加灵活,因为可以使用receiver参数来指定设置属性时的上下文对象。
        }
    }
    return new Proxy(obj,handler)
}
// 创建需要监视的对象
let user = {
    name: "John",
    age: 30
  }
  // setBind 回调函数,在属性设置时绑定操作
  function setBind(value, property) {
    console.log(`Setting value ${value} to property ${property}`);
  }
  // getlogger 回调函数,在属性获取时记录操作
  function getlogger(target, property) {
    console.log(`Getting value ${target[property]} from property ${property}`);
  }
  // 使用 onWatch 函数创建代理对象
  let watchedUser = onWatch(user, setBind, getlogger);
  // 设置代理对象的 name 属性
  watchedUser.name = "Jane";  // 输出:Setting value Jane to property name
  // 获取代理对象的 age 属性
  console.log(watchedUser.age);  // 输出:Getting value 30 from property age
//   这个示例展示了如何使用onWatch函数来创建一个代理对象,对代理对象的属性进行监视操作。
//   在设置属性时,会触发setBind回调函数,而在获取属性时,会触发getlogger回调函数,并输出对应的信息。

// 在这个代码中,使用Reflect.get和Reflect.set来代理目标对象的属性的获取和修改操作。
// 在get处理程序中,首先调用了getlogger函数来记录目标对象的属性的获取操作,然后使用Reflect.get获取属性的值并返回。
// 在set处理程序中,首先调用了setBind函数来记录设置的属性和值,然后使用Reflect.set设置属性的值。
// 这样做的好处是可以在访问和修改属性的同时执行相应的操作,而不是直接访问和修改属性。这样可以更好地控制和处理属性的访问和修改行为。

运行如下

get,set,运行能看懂但是reflect,proxy,target, property, value, receiver看不懂,有时间看下源码

相关推荐
徐小夕41 分钟前
JitWord Office预览引擎:如何用Vue3+Node.js打造丝滑的PDF/Excel/PPT嵌入方案
前端·vue.js·github
晴殇i1 小时前
揭秘JavaScript中那些“不冒泡”的DOM事件
前端·javascript·面试
孟陬1 小时前
国外技术周刊 #1:Paul Graham 重新分享最受欢迎的文章《创作者的品味》、本周被划线最多 YouTube《如何在 19 分钟内学会 AI》、为何我不
java·前端·后端
BER_c1 小时前
前端权限校验最佳实践:一个健壮的柯里化工具函数
前端·javascript
兆子龙1 小时前
别再用 useState / data 管 Tabs 的 activeKey 了:和 URL 绑定才香
前端·架构
sudo_jin1 小时前
前端包管理器演进史:为什么 npm 之后,Yarn 和 pnpm 成了新宠?
前端·npm
敲敲敲敲暴你脑袋2 小时前
写个添加注释的vscode插件
javascript·typescript·visual studio code
叁两2 小时前
用opencode打造全自动公众号写作流水线,AI 代笔太香了!
前端·人工智能·agent
golang学习记2 小时前
GitLens 十大神技:彻底改变你在 VS Code 中的 Git 工作流
前端·后端·visual studio code
SuperEugene2 小时前
后台权限与菜单渲染:基于路由和后端返回的几种实现方式
前端·javascript·vue.js