5.1 理解Proxy与Reflect(下)
看完了Proxy
与Reflect
的基本使用之后,我们实践一下。
我们曾经写过这样的代码
const reactive = (object)=>{
return new Proxy(object,{
get(target,key){
track(target,key)
return target[key]
}
set(target,key, newVal){
target[key] = newVal
trigger(target,key)
return true
}
})
}
其实就是用Proxy
代理了对象读和取操作,在读的时候收集依赖,在取的时候触发响应。看起来似乎没有问题,那么我们再试继续往下写
const obj = {
a:1,
get b(){
return this.a
}
}
const data = reactive(obj)
effect(()=>{
console.log(data.b)
})
setTimeOut(()=>{
data.b++
},500)
这里我们没有用一般的对象写法,而是通过访问器为它新增了一个b属性.之后,我们先把这个对象转换为响应式对象,再给他们设定一个响应式的回调,然后在冬天改变他的值,理论上这时候应该会执行副作用函数,但是实际上呢,根本不会执行。
我们回顾一下之前写的reactive
方法,在里面返回的是target[key]
,当我们的target是obj,key是b的时候,那个this会是谁呢?因为target是原始对象,也就是obj,根据谁调用是谁的原则,这个this也就指向了obj。obj是响应式对象吗,显然不是,那个b也就永远不会执行副作用函数,响应式就失效了。
这里其实就是this的指向问题,你可能会说一般人怎么会用getter去赋值属性呢,但是这个作为一个简单的case,甚至都算不上边界,我们需要解决它。
解决的方法也很简单,就是通过Reflect
。这也是为什么我说Proxy
与Reflect
就是焦不离孟 孟不离焦.
我们的reactive,get的时候,加入第三个参数receiver
get(target,key){
track(target,key,receiver)
return Reflect.get(target,key,receiver)
}
我这里理解的是,receiver
就相当于函数的bind
方法,它改变的this的执行,当我们同过Reflect
读取值的时候,this的指向被改为receiver
,而Reflect
时的receiver
又是Proxy
中的入参,它执行了这个Proxy
,从而把前文中this的指向由obj改为data,这样响应式就不会丢失了。
下一章中,作者会深入的介绍一下Proxy
和一些相关的标准。
转载自:https://juejin.cn/post/7126182751144771614