Proxy的Receiver的使用

为什么要使用Proxy的Receiver。

看下列代码

const obj = {
    _name: "Han",
    get name() {
        return this._name
    },
    set name(newVal) {
        this._name = newVal
    }
}
let objProxy = new Proxy(obj,{
    get(target,key){
       console.log(`调用了proxy 的 get方法`,key)
        return Reflect.get(target,key)
    },
    set(target,key,newVal){
        Reflect.set(target,key,newVal)
    }
})

console.log(objProxy.name)  
// 输出结果
调用了proxy 的 get方法 name
han

那么下面我们来看一下objProxy.name 的执行 过程
在这里插入图片描述
在实际的过程中其实访问的是_name这个属性

那么就会出现一个问题 在这个get 里面他的this 的指向是什么 是objProxy对象还是 Obj对象呢
Obj对象:为什么?因为默认情况下,直接通过this._name 去访问,他访问的就是obj对象

如果我们想objProxy来访问_name 然后 objProxy.get方法,监视用来监视_name访问过程

用Receiver来代替原对象的this指向

在这里插入图片描述

在这里插入图片描述

再次执行,发现name 被Proxy 执行,然后_name也被监听到了
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值