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个方法例子详见此处
Reflect 静态类,不能通过 new 构造实例对象,只能调静态类的静态方法,类似于Math对象
内部封装了一系列对对象的底层操作
【Proxy,Reflect】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
- AnyProxy抓取http/https请求
- HAProxy+KeepAlived高可用负载均衡搭建
- vue-cli3.0使用proxytable解决跨域问题
- cmd设置代理命令
- nginx反向代理命令
- JavaScript 之 Proxy
- 了解JSON.stringify和Reflect
- protobuf实例运行proto: cannot use m.ProtoMethods() (type *protoreflect.Message) as type *struct ...解决方案
- ble mesh-Proxy protocol详解(2)