2. 前端设计模式之代理模式

代理模式：使用代理对象控制跟目标对象的交付。

代理对象就像古装剧里皇帝上朝时边上站的太监，如果大臣有东西要交给皇帝就需要先把东西交给这个太监，有他转交给皇帝，这个时候太监对于大臣来说就是目标对象皇帝的代理对象。   

在JavaScript中实现代理对象可以通过创建Proxy类实例，比如我们现在有个目标对象张三:

const person = {
  name: "张三",
  age: 42,
  nationality: "American",
};

使用Proxy为张三创建代理对象：

const personProxy = new Proxy(person, {});

这个时候操作personProxy就是操作person。

如果只是这样不做点额外操作好像代理对象没啥用，直接操作目标对象不得了？！

为了让代理对象有点用，我们现在确定张三为犯罪嫌疑人，需要对他的行为进行监视，我们就可以这样创建代理对象：

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    console.log(`当前读取属性 ${prop} 的值为 ${obj[prop]}`);
  },
  set: (obj, prop, value) => {
    console.log(`修改属性 ${prop} 从 ${obj[prop]} 修改为 ${value}`);
    obj[prop] = value;
  },
});

其中get方法用于监视对目标对象的获取操作，如执行：personProxy.name就会在控制台输出监听日志：

当前读取属性 name 的值为 张三

set方法用于监视对目标对象的修改操作，如执行：personProxy.age = 43 就会在控制台输出监听日志;

修改属性 age 从 42 修改为 43   

发现有可疑操作时也可以立即拉响警报，比如在set方法中判断当前是不是要修过名称name属性值，如果是就立即采取行动。

完整代码