从 Vue3 源码学习 Proxy & Reflect

时间:2022-03-20 19:14:23

从 Vue3 源码学习 Proxy & Reflect

这两个功能都出现在ES6中,两者配合得非常好!

Proxy

**proxy **是一个外来的对象,他没有属性! 它封装了一个对象的行为。它需要两个参数。

  1. const toto = new Proxy(target, handler)

**target: **是指将被代理/包裹的对象 **handler: **是代理的配置,它将拦截对目标的操作(获取、设置等)

多亏了 proxy ,我们可以创建这样的 traps :

  1. const toto = { a: 55, b:66 }
  2. const handler = {
  3. get(target, prop, receiver) {
  4. if (!!target[prop]) {
  5. return target[prop]
  6. }
  7. return `This ${prop} prop don't exist on this object !`
  8. }
  9. }
  10. const totoProxy = new Proxy (toto, handler)
  11. totoProxy.a // 55
  12. totoProxy.c // This c prop don't exist on this object !

每个内部对象的 "方法" 都有他自己的目标函数

下面是一个对象方法的列表,相当于进入了 Target:

  1. object methodtargetobject[prop]getobject[prop] = 55setnew Object()constructObject.keysownKeys

目标函数的参数可以根据不同的函数而改变。

例如,对于get函数取(target, prop, receiver(proxy本身)),而对于 set 函数取(target, prop, value (to set), receiver)

例子

我们可以创建私有属性。

  1. const toto = {
  2. name: 'toto',
  3. age: 25,
  4. _secret: '***'
  5. }
  6. const handler = {
  7. get(target, prop) {
  8. if (prop.startsWith('_')) {
  9. throw new Error('Access denied')
  10. }
  11. return target[prop]
  12. },
  13. set(target, prop, value) {
  14. if (prop.startsWith('_')) {
  15. throw new Error('Access denied')
  16. }
  17. target[prop] = value
  18. // set方法返回布尔值
  19. // 以便让我们知道该值是否已被正确设置 !
  20. return true
  21. },
  22. ownKeys(target, prop) {
  23. return Object.keys(target).filter(key => !key.startsWith('_'))
  24. },
  25. }
  26. const totoProxy = new Proxy (toto, handler)
  27. for (const key of Object.keys(proxy1)) {
  28. console.log(key) // 'name', 'age'
  29. }

Reflect

Reflect 是一个静态类,简化了 proxy 的创建。

每个内部对象方法都有他自己的 Reflect 方法

  1. object methodReflectobject[prop]Reflect.getobject[prop] = 55Reflect.setobject[prop]Reflect.getObject.keysReflect.ownKeys

❓ 为什么要使用它?因为它和Proxy一起工作非常好! 它接受与 proxy 的相同的参数!

  1. const toto = { a: 55, b:66 }
  2. const handler = {
  3. get(target, prop, receiver) {
  4. // 等价 target[prop]
  5. const value = Reflect.get(target, prop, receiver)
  6. if (!!value) {
  7. return value
  8. }
  9. return `This ${prop} prop don't exist on this object !`
  10. },
  11. set(target, prop, value, receiver) {
  12. // 等价 target[prop] = value
  13. // Reflect.set 返回 boolean
  14. return Reflect.set(target, prop, receiver)
  15. },
  16. }
  17. const totoProxy = new Proxy (toto, handler)

所以你可以看到 Proxy 和 Reflect api是很有用的,但我们不会每天都使用它,为了制作陷阱或隐藏某些对象的属性,使用它可能会很好。

如果你使用的是Vue框架,尝试修改组件的 props 对象,它将触发Vue的警告日志,这个功能是使用 Proxy :) !

作者:CodeOz 译者:前端小智

来源:dev 原文:https://dev.to/codeoz/proxy-reflect-api-in-javascript-51la

从 Vue3 源码学习 Proxy & Reflect

原文链接:https://www.toutiao.com/a7034006554567410209/