proxy和reflect
在学习vue3源码的时候,对proxy和reflect忘记,故来复习。
proxy
proxy是es6引入的一种机制,允许创建要给代理对象,用于拦截和定义基本操作的自定义行为。
- 拦截和修改操作
- 数据绑定和观察
- 安全性
reflect
reflect的api和proxy的api是相似的。实现对对象的操作
proxy和reflect
这两个配合,首先有相似的api,其次,可以保持this的指向。
原型链
let proxy = new Proxy(target, {
get(target, property, receiver) {
return target[property] // 如果属性在原型链上,这里就不可以使用
}
})
使用reflect.get会自动处理这些细节
this指向
这里涉及到一个参数receiver
。receiver是为了正确的传递上下文。
const parent = {
name:'mimi',
get vulue() {
return this.name
}
}
const proxy = new Proxy(parent, {
// target标识对象key访问的属性名
get(target, key, receiver) {
console.log(receiver === proxy) // true
return target[key]
}
})
const obj = {
name: 'huahua',
};
// 设置obj继承与parent的代理对象proxy
Object.setPrototypeOf(obj, proxy);
// log: false
obj.value
// 这里的receiver只是的是obj
const parent = {
name:'mimi',
get vulue() {
return this.name
}
}
const handler = {
get(target, key, receiver) {
// return Reflect.get(target, key) // 不传入this指向,会出现this指向的错误
return Reflect.get(target, key, receiver) // 传入this指向,不会出现指向错误
}
}
const obj = {
name: 'huahua',
};
// 设置obj继承与parent的代理对象proxy
Object.setPrototypeOf(obj, proxy);
// log: false
obj.value
// 这里的receiver只是的是obj