Reflect的作用,target,property,value,receiver代表啥

1.真的proxy

复制代码
let target ={name:'张三'}
let handler = {
  get(target,property,receiver){
    console.log(1,target,2,property,3,receiver)
    return Reflect.get(target,property,receiver)
  },
  set(target,property,value,receiver){
    console.log('a',target,'b',property,'c',value,'d',receiver)
    return Reflect.set(target,property,value,receiver)
  }
}
let proxy = new Proxy(target,handler)
console.log(proxy.name)
proxy.name = '李四'
// console.log(proxy.name)

以上代码用浏览器控制台运行下如下

可知target,property,value,receiver的值

不知道为啥这里的target换成多层的对象就不起作用了

复制代码
let target ={name:'张三',info:{age:18,sex:'男'}}
console.log(proxy.info.sex)
proxy.info.sex = '女'

2.自己写的proxy

很明显这里的reflect.get被return target[key]替代,

reflect.set被 '=' 替代

说明了reflect在proxy的作用

复制代码
let handler = {
  get(target, key, receiver) {
    console.log(1, target, 2, key, 3, receiver)
    return target[key];
  },
  set(target, key, value, receiver) {
    console.log('a', target, 'b', key, 'c', value, 'd', receiver)
    target[key] = value;
    return true;
  },
};
let target ={name:'张三'}
let proxy = new Proxy(target, handler);
console.log(proxy.name)
proxy.name = '李四'
console.log(proxy.name)
相关推荐
Dream耀几秒前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
P7Dreamer1 分钟前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js
洋流1 分钟前
0基础进大厂,第12天:ES6语法基础篇
javascript
I'm写代码3 分钟前
el-tree树形结构笔记
javascript·vue.js·笔记
万少4 分钟前
最新 HarmonyOS API 20 知识库 重磅推出
前端
蓝易云11 分钟前
CentOS 7上安装X virtual framebuffer (Xvfb) 的步骤以及如何解决无X服务器的问题
前端·后端·centos
到底起什么网名才能不重名12 分钟前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
然我13 分钟前
面试必问:JS 事件机制从绑定到委托,一篇吃透所有考点
前端·javascript·面试
小蜜蜂嗡嗡21 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
一tiao咸鱼24 分钟前
如何简单使用 prompt
前端·aigc