前言
在做一个Proxy
面试题的时候,有点好奇为啥推荐使用Reflect.get
,而不是target[property]
取值,一番百度之下,有了点小总结,遂记录在此处。日常博客记录在语雀,欢迎关注我的 语雀文档。
如果文章对你有帮助的话,欢迎点赞评论收藏加转发。有问题和疑惑的话也可以在评论区留言,我会第一时间回复大家,如果觉得我的文章哪里有知识点错误的话,也恳请能够告知,把错的东西理解成对的,无论在什么行业,都是致命的。
给定一个数组,实现通过负值索引反向取值
let arr=new Proxy(['1','2','3','4'],{
// target目标对象;property被获取的属性名;receiver Proxy或者继承Proxy的对象.
get:function(target, property, receiver) {
property=Number(property)
if(property<0){
property+=target.length
}
// return target[property] 也可以
// target需要取值的目标对象;property需要获取的值的键值;
// receiver如果target对象中指定了getter,receiver则为getter调用时的this值。
return Reflect.get(target, property, receiver)
}
})
console.log(arr[-1]); //4
ES6中Proxy中,为什么推荐使用Reflect.get而不是target[key]?
我们来看例子
let People = new Proxy({
_name: 'people',
get name() {
return this._name
}
}, {
get: function (target, prop, receiver) {
return target[prop]
}
})
let Man = { _name: 'man' }
Man.__proto__ = People // Man继承People
console.log(Man._name) // man 这个name是打印的Man自身的name,正常
console.log(Man.name) // prople
再看
let People = new Proxy({
_name: 'people',
get name() {
return this._name
}
}, {
get: function (target, prop, receiver) {
return Reflect.get(target,prop,receiver);
}
})
let Man = { _name: 'man' }
Man.__proto__ = People // Man继承People
console.log(Man._name) // man 这个name是打印的Man自身的name,正常
console.log(Man.name) // man WTF
我们看到,用Reflect.get
得出来的结果是man
。它们两个主要的区别就是get name(){}
方法中的this
不同:
- 如果是用
target[key]
的,它回过去读People
里面的get name()``this
是指向了当前People
。 - 如果用
Reflect.get(target,property,receiver)
,主要注意第三个参数(如果target
对象中指定了getter
,receiver
则为getter
调用时的this
值),它表示方法的调用者,它可以让this
指向调用者,此时get name()
里面的this
,指向了Man
。 - 如果
Reflect.get
不传第三个参数,那么它和target[key]
结果就是一样的。
总结
- 没有
this
满天飞的情况下,使用target[property]
不仅语义化,而且省去了call
的开销; - 在错综复杂的环境下,想要明确
this
指向,使用Reflect.get
无疑会更安全。
结语
看了这么久了,辛苦了,不过我也写了很久啊,不妨点个赞再走吧。😁😁😁
也可以看看我的其他文章哟,嘿嘿嘿
🎉🎉2022年元旦,我终于搞懂了原型和原型
🎉🎉⌈2022⌋ JavaScript超详细循环总结
🎉🎉【建议星星】13道隐式类型转换面试题,让你一次爽到底