Proxy,Reflect

Posted mcgee0731

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Proxy,Reflect相关的知识,希望对你有一定的参考价值。

Proxy

Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”

监视某个对象的属性读写Object.defineProperty (vue3.0之前,3.0之后使用proxy)

  • 简单介绍下 Object.defineProperty

    Object.defineProperty(obj,"key",{
    enumerable:false, //key属性是否可以在for..in || Object.keys()中被枚举
    configurable:false, //key属性是否可被删除,以及除 value 和 writable 特性外的其他特性是否可以被修改
    writable:false, //不可写入,也就是不可更改obj.key
    value:undefined,
    get:undefined,
    set:undefined
    })
  • 初始化一个 new Proxy实例

    const person ={
    name:"mcgee",
    age:18
    }
    //创建proxy构造函数,参数1代理的对象,参数2执行对象
    const personProxy = new Proxy(person,{
    get(target,property){
      // console.log(target,property); //{ name: \'mcgee\', age: 18 } name
      // return 100 //外部访问属性的返回值 返回值可以是任意类型
      return property in target ? target[property]:\'default\'
    },
    set(target,property,value){
      // console.log(target,property,value);
      if(property === "age" && !Number.isInteger(value)){
        throw new Error(`${value} is not an int`)
      }
    
      return target[property] == value //返回值可以是任意类型
    }
    })
    
    console.log(personProxy.name) //100 "mcgee"
    console.log(personProxy.xxx); //default
    personProxy.render = true
    console.log(personProxy); //添加了个render为true的属性
    // personProxy.age = "aa"  //Error: aa is not an int

    具体13个方法例子详见此处

ES6阮一峰教程

Reflect

静态类,不能通过 new 构造实例对象,只能调静态类的静态方法,类似于Math对象

内部封装了一系列对对象的底层操作

Reflect成员方法就是Proxy处理对象的默认实现,它的价值,统一提供了一套用于操作对象的API

const obj = {
  name:"mcgee",
  age:18
}
const proxy1 = new Proxy(obj,{
  get(target,property){         //如果没添加get方法,内部默认使用了添加了reflect的方法
    return Reflect.get(target,property)
  }
})
console.log(proxy1.name);
//传统的访问
console.log("name" in proxy1);
console.log(delete obj[\'age\']);
console.log(Object.keys(obj));
//使用reflect访问
Reflect.has(obj,"name")
Reflect.deleteProperty(obj,"age")
Reflect.ownKeys(obj)

以上是关于Proxy,Reflect的主要内容,如果未能解决你的问题,请参考以下文章

Proxy,Reflect

Proxy/Reflect

Proxy构造函数和Reflect有什么区别?

自己写一个java.lang.reflect.Proxy代理的实现

JavaScript高级Proxy和Reflect

JavaScript高级Proxy和Reflect