js Proxy的原理详解


Posted in Javascript onMay 25, 2021

什么是代理模式

引入一个现实生活中的案例

我们作为用户需要去如何评估一个房子的好坏、如何办理住房手续等一些列繁琐的事物吗?显然,用户肯定不愿意这样做。用户最关心的是结果,用户对房子提出需求以及提供对等价值的金钱就可以获得满意的房子,这就是结果。

那么谁为用户去解决一系列繁琐的买房过程呢?当然就是“房屋中介”了!房屋中介的作用就是在房地产开发经营与消费的供求市场中,为交易物体提供评估、交易、代理、咨询等服务及善后服务的机构。

结合案例理解代理模式的定义

在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用。

代理模式就是为其他用户提供一种代理,用户不用知道买房的具体过程,而用户应该关心的是如何获得满意的结果,代理所需要做的事情就是完成这一买房的过程。

什么是Proxy

Proxy支持的拦截操作有许多中,目前只针对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分别接收到的信息如图所示

js Proxy的原理详解

通过该代理对象访问Person对象中存在的属性不会出现任何异常,如果访问不存在的属性会发生什么?

js Proxy的原理详解

是什么,以至于访问不存在的属性时,它会抛出异常呢?

这是因为外界对Person对象的访问都必须先通过Proxy设置的拦截层,而拦截层提供了一种机制可以对外界的访问进行过滤和改写。

// 判断外界访问的对象属性是否存在于目标对象中。
if (property in target) {
    return target[property];
} else {
    // 如果外界访问的对象属性不存在与目标对象中,抛出异常。
    throw new ReferenceError('Property "' + property + '" 不存在。');
}

if语句就是拦截层的具体操作,即对外界的访问进行过滤和改写。如果没有,访问不存在的属性就会返回undefined。

js Proxy的原理详解

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的三个参数分别接收到的信息如下图所示。

js Proxy的原理详解

set方法用于拦截某个属性的赋值操作,我如果对age的赋值操作不满足条件时,会发生什么?

js Proxy的原理详解

很明显,会抛出异常。

总结

Proxy就是拦截层,你给出被拦截的对象,外界访问这个对象必须先通过拦截层,即访问Proxy的实例对象。通过Proxy为外界访问进行过滤和改写,如赋值时需满足某些条件。

代理对象中还有许多的方法,如has、deleteProperty、ownKeys、getOwnPropertyDescriptor等,都是用于拦截不同的情况而出现的。

以上就是js Proxy的原理详解的详细内容,更多关于js Proxy的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
js实现无缝轮播图
Mar 09 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
解析原生JS getComputedStyle
80行代码写一个Webpack插件并发布到npm
Ajax请求超时与网络异常处理图文详解
May 23 #Javascript
vue-element-admin项目导入和导出的实现
May 21 #Vue.js
vue2实现provide inject传递响应式
May 21 #Vue.js
JS + HTML 罗盘式时钟的实现
JavaScript canvas实现流星特效
May 20 #Javascript
You might like
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Python中的变量和作用域详解
2016/07/13 Python
Python自定义线程类简单示例
2018/03/23 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
老生常谈python中的重载
2018/11/11 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
商务会议邀请函
2014/01/09 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
酒吧创业计划书
2014/01/18 职场文书
小学清明节活动总结
2014/07/04 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
Nginx快速入门教程
2021/03/31 Servers
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
如何使用pdb进行Python调试
2021/06/30 Python
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA