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.keyvalue: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); //defaultpersonProxy.render = trueconsole.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)