Proxy和Reflect
本文最后更新于 173 天前,如有失效请评论区留言。

Proxy和Reflect

当使用proxy进行数据绑定与观察的时候,监听set和get方法,使用

get (target, prop, receiver) {
  return Reflect.get(target, prop, receiver)
}

或者

get (target, prop, receiver) {
  return target[prop]
}

他们有什么区别吗?

可以直观的从参数使用上看到第二种少用了个receiver,那receiver时什么意思呢

MDN上的意思是代理或从代理继承的对象

我们来看一个示例:

let animal = {
  _name: "Animal",
  get name () {
    return this._name
  }
}

let animalProxy = new Proxy(animal, {
  get (target, prop, receiver) {
    // return Reflect.get(target, prop, receiver)
    return target[prop]
  }
})

let dog = {
  __proto__: animalProxy,
  _name: "Dog"
}
console.log(dog.name)

创建了一个animal,一个dog,dog的隐式原型指向animal

当读取 dog.name,因为 dog 对象没有这个属性,搜索就转向了它的原型 animalProxy

从 animalProxy 中读取 name 属性时,它的 get 方法就会触发,此时返回target[prop],这个target就是animal

所以返回的这个就是animal里面的_name “Animal”

但我们希望的输出结果是 Dog ,此时 receiver 参数就排上用场了,当然肯定不能直接 return receiver[prop],这样会无限循环递归调用,控制台会打印堆栈溢出

此时就需要使用 Reflect.get(target, prop, receiver) 正确地传递执行上下文(this)

当然也可以使用更短的写法

get(target, prop, receiver) {
  return Reflect.get(...arguments);
}

总结

其实一般情况下我们很难遇到这种继承调用的关系,所以平常开发中是可以使用 target[prop],当然如果封装框架那就需要考虑全面使用 Reflect.get(target, prop, receiver)

版权声明:本文为BIMiracle原创,依据CC BY-SA 4.0许可证进行授权,转载请附上出处链接及本声明。
暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇