不使用Reflect
const obj = {
a:1,
b:2,
get c(){
return this.a +this.b
}
}
const proxy = new Proxy(obj,{
get(target,key){
console.log('proxy get',key)
return target[key]
}
})
console.log(proxy.c) // proxy get c
上面例子讀取c的時候只打印 proxy get c
原因
proxy.c 讀取返回的是obj上的getter，此時this默認是指向obj的
而不是代理對象，所以this.a this. b 的讀取沒有經過代理對象，所以無法打印
使用Reflect
const obj = {
a:1,
b:2,
get c(){
return this.a +this.b
}
}
const proxy = new Proxy(obj,{
get(target,key){
console.log('proxy get',key)
return Reflect.get(target,key,proxy)
}
})
console.log(proxy.c)
// 打印
//proxy get c
//proxy get a
//proxy get b
使用Reflect后，執行get時的this會指向proxy
這時讀取a b就是過proxy的，就能達到監聽的目的
Reflect的方法
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
Reflect.apply(target, thisArgument, argumentsList)
Reflect.construct(target, argumentsList[, newTarget]) // 相當于new
Reflect.defineProperty(target, propertyKey, attributes)
Reflect.deleteProperty(target, propertyKey)
Reflect.get(target, propertyKey[, receiver])
Reflect.getOwnPropertyDescriptor(target, propertyKey)
Reflect.getPrototypeOf(target)
Reflect.has(target, propertyKey)
Reflect.isExtensible(target)
Reflect.ownKeys(target)
Reflect.preventExtensions(target)
Reflect.set(target, propertyKey, value[, receiver])
Reflect.setPrototypeOf(target, prototype)
Reflect.get和直接獲取屬性的區別
const obj = {
a:1,
b:2,
get c(){
return this.a +this.b
},
}
obj.a // 調用[[GET]]
Reflect.get(obj, 'a')// 調用[[GET]] // 兩者目前沒區別
// 但是當讀取的是函數，就會有一點區別
obj.c // 先把this指向obj，再調用[[GET]]
Reflect.get(obj, 'c')// 直接調用[[GET]] 第三個參數receiver默認是當前obj
// 上面例子這兩個其實也沒區別
// 唯一一點區別只有Reflect可以干涉[[GET]]時this的設置
拓展問題：
和apply bind call改this有什么區別
const obj = {
a:1,
b:2,
get c(){
return this.a +this.b
},
d:function d(){
console.log(this)
return this.a +this.b
}
}
Reflect.get(obj,'d',{a:2,b:3}) // 只是獲取屬性
Reflect.get(obj,'d',{a:2,b:3})() // 會執行d，打印的this是window
所以區別在于apply call bind是改的調用時的this
Reflect的receiver的設置會影響getter setter時的this，而不是調用時的this
