Proxy
用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种’元编程’
语法:let proxy = new Proxy(target, handler)
- target–所要拦截的目标对象
- handler–通常以函数作为属性的对象,定制拦截行为
Proxy 支持的拦截操作一共有13种,比如get
、set
、has
、ownKeys
、deleteProperty
等
handler.get() 在读取代理对象的某个属性时触发该操作,用于拦截某个属性的读取操作
new Proxy(target,{get(target,property,receiver)})
接收三个参数
- target–目标对象
- propert–属性名
- receiver–proxy实例本身
let data = { one:'one' , two:'two' }
let proxy = new Proxy(data,{
get(target,property,receiver){
console.log(target,property,receiver)
return property+'A'
}
})
console.log(proxy.two)
let proxy = new Proxy({},{
get(target,property,receiver){
console.log(target,property,receiver)
return '返回值'
}
})
console.log(proxy.test)
验证案例
let data = { name: "张三"};
let proxy = new Proxy(data, {
get: function(target, propKey) {
if (propKey in target) return target[propKey];
else throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.");
}
});
console.log(proxy.name)
console.log(proxy.age)
// 一旦对象被代理,this就会指向代理对象
let target = {
get: function (){ console.log(this === proxy) }
}
let handler = {}
let proxy = new Proxy(target,handler)
console.log(target.get(),proxy.get())// false true // target对象被代理,this指向代理对象
let base = {
a:100,
small:"hello world!!"
}
let proxy = new Proxy(base,{
get(target, property,receiver){
console.log(target, property,receiver)
//属性转换成函数
if("funName" === property ){
return function(value){ console.log(value) }
}
if("ghost" === property ){ return "ghost创建属性" }
//自定义语法糖
if(property.includes("_")){
const propertyBase = property.split("_")[0]
console.log(propertyBase)
const direct = property.split("_")[1]
switch (direct){
case "Big":
return receiver[propertyBase].toLocaleUpperCase()
default:
break;
}
}
if(!(property in target)){ //在target中查看是否有property这个key值,返回bools值
throw new ReferenceError("Property \"" + property + "\" does not exist.");//验证属性值,如果没有则抛出错误
}
console.log('测试')
return target[property]
}
})
console.log(proxy.a)//输出100
proxy.funName('参数')// 属性转换为方法
console.log(proxy.ghost)//创建属性
console.log(proxy.small_Big)//输出 HELLO WORLD!! 自定义语法糖
console.log(proxy.a)//数据验证 抛出错误
待续。。。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)