javascript 搞懂proxy

写在前面的话

proxy英文意思为代理,代理人,何为代理呢,可以用警匪影视台词中经常出现的一句话:“有什么事情和我的律师说吧”,在这句话中原告可以理解为被代理对象,律师可以理解为代理对象。想要访问被代理的对象必须进过代理对象这一步,代理对象可以对访问的数据进行过滤,拦截等操作。

语法

const p = new Proxy(target, handler)

语法解释,target:被代理的对象,handler:由若干函数组成的对象,该对象中定义了代理行为,诸如设置值,获取值等。

常用的handler函数

1.handler.set()方法是设置属性值操作的捕获器。

语法

const p = new Proxy(target, {
set: function(target, property, value, receiver) {
}
});

语法解释:target:被代理的对象,property:对象的属性名,value:对象的属性值,receiver:代理对象,通常是proxy对象,也有可能是继承proxy的其他对象

小试牛刀:使用set函数对输入的值做类型限定,只允许赋值的类型为number

let p = new Proxy({a:1}, {
set(target,prop,value,reciver){
if(typeof value =="number")
target[prop]=value
else{
console.error("this must number")
}
}
});
p.a="3"
console.log('p.a',p.a)//1

以上代码中依次打印出 “this.must number” 和 1 ,因为在给对象的a属性赋值的时候set会先对要赋的值进行类型判断,如果不为numbe类型就抛出“this must number”的警告,并且不进行赋值。只要将代码中的p.a="3"换成p.a=3就可以赋值成功了。

2.handler.get()方法是拦截读取属性操作

语法

const p = new Proxy(target, {
get: function(target, property, receiver) {
}
});

语法解释:target:被代理的对象,property:对象的属性名,receiver:代理对象,通常是proxy对象,也有可能是继承proxy的其他对象

小试牛刀:使用get函数对获取值的操作进行平方根操作

let p = new Proxy({a:2}, {
get(target,prop,reciver){
let _num=target[prop];
if(typeof _num =="number")
return _num*_num
else{
console.error("this must number")
}
}
});
console.log('p.a',p.a)//4

进过代理之后,只有读取的值是number类型的就会读取出他值的平方。

3.handler.has() 方法是针对 in 操作符的代理方法。

语法

var p = new Proxy(target, {
has: function(target, prop) {
}
});

语法解析:target:被代理的对象,prop:对象的属性名

小试牛刀:不管属性是不是对象存在对象之中都返回 false

let p = new Proxy({a:2}, {
has(target,prop){
return false
}
});
console.log('p.a','a' in p)//false

总结

还有很多handler 的函数方法就不一一讲解了,本篇文章就是带大家了解一下proxy的基础使用,不知道大家有没有发现,proxy对象只能对引用类型的对象进行代理,那么如果是基本类型的对象诸如number 该如何实现代理呢。其实很简单,可以将基本对象作为属性,封装在引用对象中。

 

posted @   七分暖  阅读(479)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
感觉不错来个赞@_@
回到顶部
点击右上角即可分享
微信分享提示