proxy

一般情况

代码

let data={name:'张三',age:12
}
let proxyData=new Proxy(data,{get(target,key,receiver){console.log(target===data)console.log(receiver===proxyData)console.log(target===receiver)console.log(target,key,receiver)return target[key]},set(target,key,newVal,receiver){target[key]=newVal}
})
console.log(proxyData.name)

运行结果

PS C:\Users\Administrator\Desktop\简单测试\proxy的使用> node .\reflect.js
true
true
false
{ name: '张三', age: 12 } name { name: '张三', age: 12 }
张三

结论 

target===data

receiver===proxyData

发生继承情况

代码

const data = {sex:'男',name:'张三'
};
const obj = {name: '李四',
};
const proxyData = new Proxy(data, {get(target, key, receiver) {console.log(target===data)console.log(receiver===proxyData)console.log(receiver===obj)return target[key]},
});Object.setPrototypeOf(obj, proxyData);
console.log(proxyData.sex)
console.log(obj.sex)
console.log(obj.name)

运行结果

PS C:\Users\Administrator\Desktop\简单测试\proxy的使用> node .\proxy3.js
true
true
false
男
true
false
true
男
李四

结论

target===data

receiver===obj

有一个疑惑点

代码

const data = {sex:'男'
};
const obj = {name: '李四',
};
const proxyData = new Proxy(data, {get(target, key, receiver) {console.log(target)console.log(key)return target[key]},
});Object.setPrototypeOf(obj, proxyData);
console.log(obj)

运行结果

PS C:\Users\Administrator\Desktop\简单测试\proxy的使用> node .\proxy3.js
{ sex: '男' }
Symbol(nodejs.util.inspect.custom)
{ sex: '男' }
Symbol(Symbol.toStringTag)
{ name: '李四' }

上面的结果是为什么？知道的伙伴，可以留言解释一下

还有，如果一不小心写了

 get(target, key, receiver) {console.log(target)console.log(key)console.log(receiver)或console.log(obj)return target[key]},

会一直循环到报错

Reflect

不用Reflect方法

代码

const data = {sex:'男',get value(){return this.sex}
};
const obj = {sex:'女'
};
const proxyData = new Proxy(data, {get(target, key, receiver) {console.log(target)console.log(key)return target[key]},
});Object.setPrototypeOf(obj, proxyData);
console.log(proxyData.value)
console.log(obj.value)

运行结果

PS C:\Users\Administrator\Desktop\简单测试\proxy的使用> node .\proxy3.js
{ sex: '男', value: [Getter] }
value
男
{ sex: '男', value: [Getter] }
value
男

分析

obj没有value属性，所以obj会通过proxyData去访问data中value属性

target[value]===data[value]===[Getter]===value(){return this.sex}

但是this的指向谁?this默认指向data。

怎么更改this的指向，见下

使用Reflect方法

代码1

const data = {sex:'男',get value(){return this.sex}
};
const obj = {sex:'女'
};
const proxyData = new Proxy(data, {get(target, key, receiver) {console.log(target)console.log(key)return Reflect.get(target,key,receiver)},
});Object.setPrototypeOf(obj, proxyData);
console.log(proxyData.value)
console.log('----')
console.log(obj.value)

运行结果1

PS C:\Users\Administrator\Desktop\简单测试\proxy的使用> node .\proxy3.js
//访问proxyData.value
{ sex: '男', value: [Getter] } //console.log(target)
value                          //console.log(key)//通过Reflect.get(target,key,receiver)访问data.value
//此时的 value(){return receiver.sex} 并且receiver===proxyData 
//访问proxyData.sex 
{ sex: '男', value: [Getter] } 
sex
男----
{ sex: '男', value: [Getter] }
value
女

代码2

const data = {sex:'男',get value(){return this.sex}
};
const obj = {sex:'女'
};
const proxyData = new Proxy(data, {get(target, key, receiver) {console.log(target)console.log(key)return Reflect.get(target,key,{sex:'不确定'})},
});Object.setPrototypeOf(obj, proxyData);
console.log(proxyData.value)
console.log('----')
console.log(obj.value)

运行结果2

PS C:\Users\Administrator\Desktop\简单测试\proxy的使用> node .\proxy3.js
{ sex: '男', value: [Getter] }
value
不确定
----
{ sex: '男', value: [Getter] }
value
不确定