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中String和StringBuffer的速度之争
Apr 01 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 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 ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
php微信开发之图片回复功能
2018/06/14 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
歌唱比赛获奖感言
2014/01/21 职场文书
私人委托书格式
2014/09/10 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
工作自我推荐信范文
2015/03/25 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
关于Python使用turtle库画任意图的问题
2022/04/01 Python