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版代码高亮
Jun 26 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
js实现下一页页码效果
Mar 07 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
javascript 打印页面代码
2009/03/24 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
信息专业个人的自我评价
2013/12/27 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
物流合作计划书
2014/01/10 职场文书
小学信息技术教学反思
2014/02/10 职场文书
党性分析自查总结
2014/10/14 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技