当前位置： 当前位置：首页 >应用开发 >从 Vue3 源码学习 Proxy & Reflect正文

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

Proxy

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

const toto = new Proxy(target,源码 handler) 

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

多亏了 proxy ，源码我们可以创建这样的学习 traps ：

const toto = { a: 55, b:66 } const handler = {  get(target, prop, receiver) {    if (!!target[prop]) {      return target[prop]     }     return `This ${prop} prop dont exist on this object !`   } } const totoProxy = new Proxy (toto, handler) totoProxy.a // 55 totoProxy.c // This c prop dont exist on this object ! 

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

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

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

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

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

例子

我们可以创建私有属性。源码

const toto = {    name: toto,学习    age: 25,    _secret: *** } const handler = {   get(target, prop) {    if (prop.startsWith(_)) {        throw new Error(Access denied)     }     return target[prop]   },   set(target, prop, value) {    if (prop.startsWith(_)) {        throw new Error(Access denied)     }     target[prop] = value     // set方法返回布尔值     // 以便让我们知道该值是否已被正确设置 !     return true   },   ownKeys(target, prop) {      return Object.keys(target).filter(key => !key.startsWith(_))   }, } const totoProxy = new Proxy (toto, handler) for (const key of Object.keys(proxy1)) {   console.log(key) // name, age } 

Reflect

Reflect 是一个静态类，简化了 proxy 的源码创建。

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

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

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

const toto = { a: 55, b:66 } const handler = {   get(target, prop, receiver) {    // 等价 target[prop]    const value = Reflect.get(target, prop, receiver)    if (!!value) {       return value     }    return `This ${prop} prop dont exist on this object !`    },   set(target, prop, value, receiver) {      // 等价  target[prop] = value      // Reflect.set 返回 boolean      return Reflect.set(target, prop, receiver)   }, } 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

源码下载