经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
通俗易懂的JS之Proxy
来源:cnblogs  作者:kongsam  时间:2021/5/24 10:52:20  对本文有异议

与掘金文章同步:https://juejin.cn/post/6964398933229436935

什么是代理模式

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

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

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

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

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

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

什么是Proxy

Proxy用于修改某些操作的默认行为,在目标对象前架设一个“拦截”层,外界对该对象的访问都必须先通过这一层拦截,因此提供了一种机制可以对外界的访问进行过滤和改写。——《ES6标准入门》- 第12章

Proxy支持的拦截操作有许多中,目前只针对get(target, propKey, receiver)和set(target, propKey, value, receiver)来讲。

  1. get方法:拦截对象属性的读取;
  2. set方法:拦截对象属性的设置。

get(target, propKey, receiver)

定义一个Person对象,它将被Proxy代理,外界通Proxy实例对象来访问Person对象。

  1. var person = {
  2. name: "kongsam",
  3. age: 21,
  4. hobbies: [
  5. "看动漫",
  6. "骑行",
  7. "玩游戏"
  8. ]
  9. }

实例化一个Proxy对象,用于拦截外界对Person对象的操作。

  1. var proxy = new Proxy(person, {
  2. get: function (target, property) {
  3. // 打印target和property,查看里面到底是什么。
  4. console.log("target = ", target);
  5. console.log("property = ", property);
  6. // 判断外界访问的对象属性是否存在于目标对象中。
  7. if (property in target) {
  8. return target[property];
  9. } else {
  10. // 如果外界访问的对象属性不存在与目标对象中,抛出异常。
  11. throw new ReferenceError('Property "' + property + '" 不存在。');
  12. }
  13. },
  14. });

当进行proxy.name操作时,由于Person对象已经被Proxy代理了,所以每当我通过该Proxy实例对象访问Person中存在的属性时,都会调用get方法,get方法是拦截对象属性的读取的。

get: function (target, property) 中的两个参数target和property分别接收到的信息如图所示

image.png

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

image.png

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

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

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

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

image.png

set(target, propKey, value, receiver)

依旧是Person对象,这时我有个新需求,即修改age属性时,值不能超过150且是整数。

新增Proxy对象中的set方法。

  1. var proxy = new Proxy(person, {
  2. set: function (target, property, value) {
  3. // 打印target、property和value,查看里面到底是什么。
  4. console.log("target = ", target);
  5. console.log("property = ", property);
  6. console.log("value = ", value);
  7. if (property === "age") {
  8. if (!Number.isInteger(value)) {
  9. throw new TypeError("age的值不是整数!");
  10. }
  11. if (value > 150) {
  12. throw new RangeError("age的值不能大于150!");
  13. }
  14. }
  15. },
  16. });

当我执行proxy.age = 100时,set的三个参数分别接收到的信息如下图所示。

image.png

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

image.png

很明显,会抛出异常。

总结

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

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

原文链接:http://www.cnblogs.com/kongsam/p/14792115.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号