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操作word的参考代码
Oct 26 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
js实现input密码框显示/隐藏功能
Sep 10 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
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
计算机网络专业推荐信
2013/11/24 职场文书
酒店总经理工作职责
2013/12/13 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
开学典礼策划方案
2014/05/28 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
MongoDB支持的数据类型
2022/04/11 MongoDB