js的逻辑关系和思路(js Proxy的原理详解)
js的逻辑关系和思路
js Proxy的原理详解目录
- 什么是代理模式
- 引入一个现实生活中的案例
- 结合案例理解代理模式的定义
- 什么是Proxy
- get(target, propKey, receiver)
- set(target, propKey, value, receiver)
- 总结
引入一个现实生活中的案例
我们作为用户需要去如何评估一个房子的好坏、如何办理住房手续等一些列繁琐的事物吗?显然,用户肯定不愿意这样做。用户最关心的是结果,用户对房子提出需求以及提供对等价值的金钱就可以获得满意的房子,这就是结果。
那么谁为用户去解决一系列繁琐的买房过程呢?当然就是“房屋中介”了!房屋中介的作用就是在房地产开发经营与消费的供求市场中,为交易物体提供评估、交易、代理、咨询等服务及善后服务的机构。
结合案例理解代理模式的定义
在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用。
代理模式就是为其他用户提供一种代理,用户不用知道买房的具体过程,而用户应该关心的是如何获得满意的结果,代理所需要做的事情就是完成这一买房的过程。
什么是ProxyProxy支持的拦截操作有许多中,目前只针对get(target, propKey, receiver)和set(target, propKey, value, receiver)来讲。
- get方法:拦截对象属性的读取;
- set方法:拦截对象属性的设置。
get(target, propKey, receiver)
定义一个Person对象,它将被Proxy代理,外界通Proxy实例对象来访问Person对象。
var person = { name: "kongsam", age: 21, hobbies: [ "看动漫", "骑行", "玩游戏" ] }
实例化一个Proxy对象,用于拦截外界对Person对象的操作。
var proxy = new Proxy(person, { get: function (target, property) { // 打印target和property,查看里面到底是什么。 console.log("target = ", target); console.log("property = ", property); // 判断外界访问的对象属性是否存在于目标对象中。 if (property in target) { return target[property]; } else { // 如果外界访问的对象属性不存在与目标对象中,抛出异常。 throw new ReferenceError('Property "' + property + '" 不存在。'); } }, });
当进行proxy.name操作时,由于Person对象已经被Proxy代理了,所以每当我通过该Proxy实例对象访问Person中存在的属性时,都会调用get方法,get方法是拦截对象属性的读取的。
get: function (target, property) 中的两个参数target和property分别接收到的信息如图所示
通过该代理对象访问Person对象中存在的属性不会出现任何异常,如果访问不存在的属性会发生什么?
是什么,以至于访问不存在的属性时,它会抛出异常呢?
这是因为外界对Person对象的访问都必须先通过Proxy设置的拦截层,而拦截层提供了一种机制可以对外界的访问进行过滤和改写。
// 判断外界访问的对象属性是否存在于目标对象中。 if (property in target) { return target[property]; } else { // 如果外界访问的对象属性不存在与目标对象中,抛出异常。 throw new ReferenceError('Property "' + property + '" 不存在。'); }
if语句就是拦截层的具体操作,即对外界的访问进行过滤和改写。如果没有,访问不存在的属性就会返回undefined。
set(target, propKey, value, receiver)
依旧是Person对象,这时我有个新需求,即修改age属性时,值不能超过150且是整数。
新增Proxy对象中的set方法。
var proxy = new Proxy(person, { set: function (target, property, value) { // 打印target、property和value,查看里面到底是什么。 console.log("target = ", target); console.log("property = ", property); console.log("value = ", value); if (property === "age") { if (!Number.isInteger(value)) { throw new TypeError("age的值不是整数!"); } if (value > 150) { throw new RangeError("age的值不能大于150!"); } } }, });
当我执行proxy.age = 100时,set的三个参数分别接收到的信息如下图所示。
set方法用于拦截某个属性的赋值操作,我如果对age的赋值操作不满足条件时,会发生什么?
很明显,会抛出异常。
总结Proxy就是拦截层,你给出被拦截的对象,外界访问这个对象必须先通过拦截层,即访问Proxy的实例对象。通过Proxy为外界访问进行过滤和改写,如赋值时需满足某些条件。
代理对象中还有许多的方法,如has、deleteProperty、ownKeys、getOwnPropertyDescriptor等,都是用于拦截不同的情况而出现的。
以上就是js Proxy的原理详解的详细内容,更多关于js Proxy的资料请关注开心学习网其它相关文章!
- Js操作cookie
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- js页面跳转的几种代码
- js怎么上传压缩图片(如何用JS有效的压缩图片)
- js实现商品添加(js实现购物网站放大镜功能)
- php验证码图解(php/JS实现的生成随机密码验证码功能示例)
- js淘宝购物车效果代码(JavaScript实现电商平台商品细节图)
- js三级联动列表(基于JavaScript实现年月日三级联动)
- 用js做一个计算器(使用JS实现简易计算器)
- qt和js相互调用(QT与javascript交互数据的实现)
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- extjs 日期控件
- mysql 查询json(MySQL处理JSON常见函数的使用)
- tomcat服务如何在eclipse中配置(HBuilderX配置tomcat外部服务器查看编辑jsp界面的方法详解)
- videojs播放流媒体(video.js支持m3u8格式直播的实现示例)
- extjs中apply和applyIf的用法
- 泰剧《爱欲之神》Boom kitkong和Great合体杂志(泰剧爱欲之神Boomkitkong和Great合体杂志)
- 素人恋爱综艺火药味十足 男生为赢得芳心集体扯头花,真是出好戏(素人恋爱综艺火药味十足)
- 《囧妈》为何受抵制 春节七部影片撤档背后的责任与博弈(囧妈为何受抵制)
- 提醒 2019年起河南驾考要开设科目五 官方回应来了(2019年起河南驾考要开设科目五)
- 省 市书法家协会 送万福进万家 活动走进禹州美丽乡村(省市书法家协会)
- 点赞 禹州苌庄正式撤乡建镇 未来发展不可估量(禹州苌庄正式撤乡建镇)
热门推荐
- 虚拟主机有几种(如何辨别虚拟主机的好坏?)
- css3渐变色动画代码(CSS3 实现的动态星空背景)
- dedecms添加文档(Dedecms自定义模型解决会员无法投稿的方法)
- smartbattery插件正确使用方法(Smarty模板配置实例简析)
- dedecms更新后设置不显示(dedecms中tags页面显示错位的解决方法)
- 盘点CSS Selectors Level4中新增的选择器(盘点CSS Selectors Level4中新增的选择器)
- h5 video支持格式(H5 video poster属性设置视频封面的方法)
- php中function函数的用法(PHP中quotemeta函数的用法讲解)
- vue考试链接重置(Vue实现答题功能)
- dedecms标签怎么用(dedecms列表页上一页下一页翻页单独调用的方法)