手把手实现vue响应式原理 - Reflect 中receiver的作用（五）

最新推荐文章于 2024-04-17 22:16:12 发布

提测前一定好好自测

最新推荐文章于 2024-04-17 22:16:12 发布

阅读量1.7k

点赞数

分类专栏： vue响应式原理文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/frontendchen/article/details/121940628

版权

vue响应式原理专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文探讨了如何使用JavaScript的Proxy对象来监听并拦截对象属性的读取和设置操作。通过创建代理对象，我们可以控制get和set方法的行为，确保在访问或修改对象属性时，能够进行额外的操作。在get和set的捕获器中，通过传入receiver参数，确保this指向代理对象，从而实现在obj内部访问的属性也能经过代理，达到全面的拦截效果。

摘要由CSDN通过智能技术生成

const obj = {
    _name: 'deyang',
    get name() {
        console.log('元对象的get被调用了')
        return this._name
    },
    set name(newName) {
        this._name = newName
    }
}

我们想要对obj 对象的get 和 set进行监听，通过创建 proxy代理对象的方式来监听 obj 上面属性的读取和设置值

const objProxy = new Proxy(obj, {
    get(target, key) {
        return Reflect.get(target, key)
    },
    set(target, key, newValue) {
        Reflect.set(target, key, newValue)
    }
})

console.log(objProxy.name)

当我们通过代理对象 objProxy读取name属性的时候，会进入到 get 的捕获器里面，然后又通过 Reflect.get() ，会去访问 obj 对象的 get 方法，在里面又通过 this 访问obj 的name属性。如果我们对obj内所有属性的访问和操作都想经过 proxy代理拦截的话，那么就有问题了，目前对于 this._name 的访问后续没有来到objProxy代理，那么拦截就失去了效果，因此要想办法让 obj中 get访问的属性 this指向为代理对象。

const objProxy = new Proxy(obj, {
    get(target, key, receiver) {
        // receiver 是创建出来的代理对象
        console.log('get方法被调用----', key, receiver)
        return Reflect.get(target, key, receiver)
    },
    set(target, key, newValue, receiver) {
        console.log('set方法被调用----', key, receiver)
        Reflect.set(target, key, newValue, receiver)
    }
})

console.log(objProxy.name)

get捕获器可以传入第三个参数 receiver，这个 receiver 就是创建出来的代理对象。而Reflect.get()也可以传入第三个参数 receiver，传入这个参数后，可以改变target对象get方法的 this 为 receiver，此时就是代理对象。那么通过代理对象访问 name的时候会经过 obj 的 get 方法 ,此时返回的就是代理对象的name ，然后又回到代理对象的 get。最后在代理对象中的拦截操作就变得有意义。因此这里的代理对象get会调用两次。同样的 set也是可以传递 receiver 对象的