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

什么是代理模式

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

我们作为用户需要去如何评估一个房子7 z = k 4 # I z Z的好坏、如何@ J b W c办理住房手续等一些列繁琐的事物吗?显然,用户肯定不愿意这样做。用户最关心的是结果,用户对房A n K 8 \ q t U子提出需求+ ( 8 R以及提供对等价值的金钱就可以获得满意的房子,这就是结果。

那么谁为用户去解决一系列繁琐的买房过程呢?当然就是“房屋中介”了!房屋中介的作用就是在房地产开发经营与消2 o M 1 j c h f费的供求市场中,% 3 N k G H m K为交易物体提供评估t Z / l ( m 7 ` B、交易、代理、咨询等服务及善后服务的机构。

结合案j a A ; 8 } * A P例理解代理模式的定义

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

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

什么是Pr0 I _ Q _ joxy

Proxy用于修改w & . X某些操作的默认行为,在目标对象前架设一个“拦截”层,外界对该6 z 7 u T X1 O Z ! v A m 0 f象的访问都必须N V E P ; ; ) t e先通过这一R K 9 & ( : * P层拦截,因此提供了一种机制可以对外界的访问进行过滤和改写。——《ES6标准入门》- 第12章

Proxy支持的拦截操作有许多中,目前只针对get(target, propKey, receive$ G \ ) ur)和set(target9 p v }, propKey, value, receiver)来讲N V p

  1. get方法:拦截对象属性的读取;
  2. set方法:拦截对象属性的W ) b N f i设置。

get} ( V 7 5(target, propKey, receiver)

定义一个Persq 1 Y @ } [ & [on对象,它将被Proxy代理,外界通Proxy实例对象来访问Person对象。

var person = {
name: "kongsam",
age: 21,
hS $ F b robbies: [
"看动漫",
"骑行",
"玩游戏"
]
}z 4 !

实例化一个Proxy对象,用于拦截外界对Peb _ i a p P |rson对象的操作。

var proxy = new Proxy(person, {
get: function (target, property) {
// 打印target和propertb T v Q ; k [ F 1y,查看里面到底是什么。
console.log(O { k \"target = ", target);
console.log("property = ", property);
// 判断外界访问的3 i [ ] r对象属性是否存在于目标对象中。
if (property in target) {
return target[property];
} else {
/w ; x k g/ 如果外界访问的对S G A n T j $象属性不存在与目标对象中,抛出异常。
throw new Refereng E & q [ j b (ceError('Prob 5 x ~ k $ 1 $perty "' + property + '" 不存在。');
}
},
});

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

get: functio\ # I Gn (target, propA . N r & 7 G \erty) 中的两个参数target和property分别接收到的信息如图所示

image.png

通过该代理对象访问Person对象中存在? W | b s z的属性不会出现任何异常,如果访问不存在的属性会发生什么t d e o K 4 z yY | ] u

image.png

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

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

// 判断外界访问的对象属性是否存在于目标对象中。
if (prn f poperty in target) {
return target[property];
} else {
// 如果外界访问的对象属性不存在与目标对象中,抛出异常。
throw new Refere5 p 0 # H (nceError('Property "' + property + '" 不存在。');
}

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

image.png

set(target, propKey, value, receiver)

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

新增Proxy= ^ I ] ) B J d对象中` v 5 P h w W M B的set方法。

var proxy = new Proxy(peW [ Y i ; O | Srson, {
set: functioni d S 2 S (target, property, vC Y P A @ _ [ }alue) {
// 打印target、property和value,A ; 6 i Y _查看里面到底是什么。
console.log("tV Q r _ t $arget = ", target);
console.loo [ 4g("property = ", property);
console.log("value = ",w m T 2 ! { valued ! S } l n);
if (property === "age") {
if (!Number^ t _ 3 1 1 e ^.isInteger(value)) {
throw new TypeError("age的值不是整数!");
}
if (val i ilue > 150) {
throw neY P $ B ] 4w RangeError("age的值不能大于150!");\ w p
}
}
},
});

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

image.png

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

image.png

很明@ H \ ] d o V显,会抛出异常。

总结

Proxy就是拦截层,你给出被拦截的对象,外界访问这个对象} s H N E % 5 Y必须先通过拦截层,即访问ProU x # A j Q Kxy的实例对象。通过Proxy为外界访问进行过滤b d ] P T L 6 &和改写,如赋值时需满足某些条件。

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注