认识Proxy和Reflect

240 阅读2分钟

认识Proxy和Reflect

proxy的用法

const proxy = new Proxy(target,{

    get(target,key,receiver){

        //receiver  代理的源对象

        const res = Reflect.get(targe,key,receive);

        return res

   },

    set(target,key,value,receiver){

        const res = Reflect.set(targe,key,value,receive);

        //让target[key] = value  这两个的行为是一致的



        return res

   }

})

const p = new Proxy(target, handler)

​ Proxy作用:proxy 用于定义基本操作的自定义行为 比如拦截 get set。

​ 属性介绍:

​ target 要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。

​ handler 一个通常以函数作为属性的对象(也就是get或者set等)

​ 各属性中的函数分别定义了在执行各种操作时代理 p 的行为(比如get的获取,set的设置)。

​ handler 还有其他的一些方法 比如handler.defineProperty

Reflect 介绍

Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法。

​ 在new proxy 进行代理的时候,对handler里面的方法进行拦截,并操作。reflect一般和Proxy配合使用。

这些方法与proxy handlers的方法相同。

​ proxy handlers上面有一个set方法,Reflect 上面就有一个set方法;

​ proxy handlers上面有一个get方法 Reflect 上面就有一个get方法。

Reflect不是一个函数对象,因此它是不可构造的。

​ 可以理解为 Reflect = {

​ get,

​ set

}

使用Reflect的好处:

1、与handler的方法保持高度的一致

2、具有返回值的

3、统一的管理元层面的内置的方法

4、const res = Reflect.set(targe,key,value,receive);

​ 这种方法是一种函数式编程的,不要去操作对象,而是通过类似于方法管理器一样的东西

​ 就是reflect 然后调用函数,直接去做,这样更好

defineProperty 的用法法

Object.defineProperty(data,key,{

  get(){



  },

  set(newValue){



  }

})
  • Object上面的方法 逐步 转移到reflect上面

  • Object实际上是一个类型 有很多的方法 都是JavaScript内置的元层面的方法,但是都挂载到了类型上面 违背了ECMAScript标准

  • 元层面上的方法应该有一个东西统一的去管理 那就是reflect

    菜鸟学习源码中,如果有错误,谢谢大家指出!!!QAQ