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 触发HTML元素绑定的函数
Sep 11 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
Node.js+Express配置入门教程
May 19 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
JS变量及其作用域
2017/03/29 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
初步认识Python中的列表与位运算符
2015/10/12 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
儿媳婚宴答谢词
2014/01/14 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
对照检查剖析材料
2014/09/30 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
工程主管竞聘书
2015/09/15 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android