Javascript设计模式——代理模式

大家好，欢迎来到IT知识分享网。

拦截并控制与目标对象交互的艺术。

为目标对象提供渐进增强的交互能力。

代理反射虽好，可不要过度使用。

通过使用代理对象，允许我们获得更多对于目标对象的交互控制。使用代理对象可以改变在目标对象交互过程中的具体行为，比如读取或者设置目标对象的属性。

通常来说，代理这个词的概念就是在A到B的过程中设置一个中间人。不同于直接与对方进行交谈，你会通过中间人进行交谈，而中间人则传递你与对方的对话过程。在JavaScript中也一样，我们可以选择不直接与对象进行交互，而是通过代理对象与其发生交互。

假设我们创建一个对象person，它表示一个叫做John Doe的人。

const person = { name: "John Doe", age: 42, nationality: "American" };

我们假设不愿意直接跟John对话，而是希望通过一个中间人与其进行沟通。在JavaScript中我们可以轻松地通过创建Proxy实例来为John创建一个代理。

const person = { name: "John Doe", age: 42, nationality: "American" }; const personProxy = new Proxy(person, {});

Proxy构造函数的第二个参数表示的是处理函数对象。在处理函数对象内部，我们可以根据不同的交互类型为代理设置指定的代理行为。虽说对于代理对象可以设置很多种类的处理函数，但最常见的还是get和set函数。

• get: 读取目标对象属性时会触发调用
• set: 修改目的对象属性时会触发调用

通过使用代理读取或者修改John的属性时，最终的过程如下面视频所示：

我们会与personProxy对象进行交互，而不是直接与person对象面对面交谈。

接下来我们可以为personProxy代理对象添加具体的处理函数。

1. 假设我们想在对目标对象进行修改时——也就是会触发Proxy对象中的set方法的时刻——使用代理对象记录属性的上一次的值和新设置的值。
2. 读取目标对象的属性值时——也就是会触发Proxy对象中的get方法的时刻——使用代理对象记录更加可读的日志信息，其中包括读取的属性名称和属性值。

const personProxy = new Proxy(person, { get: (obj, prop) => { console.log(`The value of ${prop} is ${obj[prop]}`); }, set: (obj, prop, value) => { console.log(`Changed ${prop} from ${obj[prop]} to ${value}`); obj[prop] = value; } });

接下来我们看看通过调用代理对象读取或者修改目的对象的属性时，会发生些什么。

const person = { name: "John Doe", age: 42, nationality: "American" }; const personProxy = new Proxy(person, { get: (obj, prop) => { console.log(`The value of ${prop} is ${obj[prop]}`); }, set: (obj, prop, value) => { console.log(`Changed ${prop} from ${obj[prop]} to ${value}`); obj[prop] = value; return true; } }); personProxy.name; // console.log: The value of name is John Dow personProxy.age = 43; // console.log: Changed age from 42 to 43

当获取name属性时，代理对象会记录一条更加可读的日志：The value of name is John Doe。

修改age属性时，代理对象会记录修改的属性名称以及新旧两个值： Changed age from 42 to 43。

使用代理对象非常适合进行校验的场景。比如不允许用户为person实例的年龄属性设置一个字符串类型的值，或者设置一个空的姓名。或者当用户试图读取不存在属性值，那么我们应该让他知道这事出了问题。

const personProxy = new Proxy(person, { get: (obj, prop) => { if (!obj[prop]) { console.log( `Hmm.. this property doesn't seem to exist on the target object` ); } else { console.log(`The value of ${prop} is ${obj[prop]}`); } }, set: (obj, prop, value) => { if (prop === "age" && typeof value !== "number") { console.log(`Sorry, you can only pass numeric values for age.`); } else if (prop === "name" && value.length < 2) { console.log(`You need to provide a valid name.`); } else { console.log(`Changed ${prop} from ${obj[prop]} to ${value}.`); obj[prop] = value; } } });

执行下面的代码能看到如果传入错误的值时会发生什么。

const person = { name: "John Doe", age: 42, nationality: "American" }; const personProxy = new Proxy(person, { get: (obj, prop) => { if (!obj[prop]) { console.log( `Hmm.. this property doesn't seem to exist on the target object` ); } else { console.log(`The value of ${prop} is ${obj[prop]}`); } }, set: (obj, prop, value) => { if (prop === "age" && typeof value !== "number") { console.log(`Sorry, you can only pass numeric values for age.`); } else if (prop === "name" && value.length < 2) { console.log(`You need to provide a valid name.`); } else { console.log(`Changed ${prop} from ${obj[prop]} to ${value}.`); obj[prop] = value; } return true; } }); personProxy.nonExistentProperty; // console.log: Hmm.. this property doesn't seem to exist on the target object personProxy.age = "44"; // console.log: Sorry, you can only pass numeric values for age. personProxy.name = ""; // console.log: You need to provide a valid name

通过代理不仅帮助我们避免对person对象传入错误类型的值，同时也保证了数据模型类Person的纯洁性。

反射

JavaScript提供了内置的Reflect对象，这让我们在使用代理对象时更易于操控目标对象。

在之前的段落中，我们在代理的处理函数内部使用方括号的形式对目标对象的属性进行读取或者修改。除此以外，我们还可以使用Reflect对象执行同样的操作。Reflect对象上的方法名与处理函数对象的方法名一致。

下面的代码展示了如何不使用obj[prop]或者obj[prop] = value的形式，而是通过Reflect.get()方法以及Refect.set()方法对目标对象的属性值读取或者修改。这两个方法接受的参数与处理函数接受的参数一致。

const personProxy = new Proxy(person, { get: (obj, prop) => { console.log(`The value of ${prop} is ${Reflect.get(obj, prop)}`); }, set: (obj, prop, value) => { console.log(`Changed ${prop} from ${obj[prop]} to ${value}`); Reflect.set(obj, prop, value); } });

执行下面的代码可以观察到通过Reflect对象如何对目的对象的属性值进行操作：

const person = { name: "John Doe", age: 42, nationality: "American" }; const personProxy = new Proxy(person, { get: (obj, prop) => { console.log(`The value of ${prop} is ${Reflect.get(obj, prop)}`); }, set: (obj, prop, value) => { console.log(`Changed ${prop} from ${obj[prop]} to ${value}`); Reflect.set(obj, prop, value); } }); personProxy.name; // console.log: The value of name is John Doe personProxy.age = 43; // console.log: Changed age from 42 to 43 personProxy.name = "Jane Doe"; // console.log: Changed name from John Doe to Jane Doe

对于目的对象的默认行为增加控制与增强操作行为这种场景来说，代理模式属实是一种强大的存在。代理模式的使用场景也很多变：添加校验，添加格式化能力，增加通知功能或者仅仅是进行debug。

但是要注意过量使用Proxy对象，或者在每一个处理函数内部执行大量耗时操作会对应用性能造成明显的影响。因此最好不要在性能要求高的场景下过度使用代理。