ES6的Proxy中,为什么推荐使用Reflect.get而不是target[key]?

2,760 阅读1分钟

前言

在做一个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不同:

  1. 如果是用target[key]的,它回过去读People里面的get name()``this是指向了当前People
  2. 如果用Reflect.get(target,property,receiver),主要注意第三个参数(如果target对象中指定了getterreceiver则为getter调用时的this值),它表示方法的调用者,它可以让this指向调用者,此时 get name() 里面的this,指向了Man
  3. 如果Reflect.get不传第三个参数,那么它和target[key]结果就是一样的。

总结

  1. 没有this满天飞的情况下,使用target[property]不仅语义化,而且省去了call的开销;
  2. 在错综复杂的环境下,想要明确this指向,使用Reflect.get无疑会更安全。

结语

看了这么久了,辛苦了,不过我也写了很久啊,不妨点个赞再走吧。😁😁😁

也可以看看我的其他文章哟,嘿嘿嘿

🎉🎉2022年元旦,我终于搞懂了原型和原型
🎉🎉⌈2022⌋ JavaScript超详细循环总结
🎉🎉【建议星星】13道隐式类型转换面试题,让你一次爽到底

引用

首发于语雀文档@is_tao
es6中Proxy中,为啥推荐Reflect.get而不是target[key]