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 该如何实现代理呢。其实很简单,可以将基本对象作为属性,封装在引用对象中。
本文来自博客园,作者:七分暖,转载请注明原文链接:https://www.cnblogs.com/lin494910940/p/16887048.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签