实例解析ES6 Proxy使用场景介绍

ES6 中的箭头函数、数组解构、rest 参数等特性一经实现就广为流传，但类似 Proxy 这样的特性却很少见到有开发者在使用，一方面在于浏览器的兼容性，另一方面也在于要想发挥这些特性的优势需要开发者深入地理解其使用场景。就我个人而言是非常喜欢 ES6 的 Proxy，因为它让我们以简洁易懂的方式控制了外部对对象的访问。在下文中，首先我会介绍 Proxy 的使用方式，然后列举具体实例解释 Proxy 的使用场景。

Proxy，见名知意，其功能非常类似于设计模式中的代理模式，该模式常用于三个方面：

1. 拦截和监视外部对对象的访问
2. 降低函数或类的复杂度
3. 在复杂操作前对操作进行校验或对所需资源进行管理

在支持 Proxy 的浏览器环境中，Proxy 是一个全局对象，可以直接使用。Proxy(target, handler) 是一个构造函数，target 是被代理的对象，handlder 是声明了各类代理操作的对象，最终返回一个代理对象。外界每次通过代理对象访问 target 对象的属性时，就会经过 handler 对象，从这个流程来看，代理对象很类似 middleware（中间件）。那么 Proxy 可以拦截什么操作呢？最常见的就是 get（读取）、set（修改）对象属性等操作，完整的可拦截操作列表请点击这里。此外，Proxy 对象还提供了一个 revoke 方法，可以随时注销所有的代理操作。在我们正式介绍 Proxy 之前，建议你对 Reflect 有一定的了解，它也是一个 ES6 新增的全局对象，详细信息请参考MDN Reflect。

Basic

const target = { 
  name: 'Billy Bob',
  age: 15
};

const handler = { 
  get(target, key, proxy) {
    const today = new Date();
    console.log(`GET request made for ${key} at ${today}`);

    return Reflect.get(target, key, proxy);
  }
};

const proxy = new Proxy(target, handler);
proxy.name;
// => "GET request made for name at Thu Jul 21 2016 15:26:20 GMT+0800 (CST)"
// => "Billy Bob"

在上面的代码中，我们首先定义了一个被代理的目标对象 target，然后声明了包含所有代理操作的 handler 对象，接下来使用 Proxy(target, handler) 创建代理对象 proxy，此后所有使用 proxy 对 target 属性的访问都会经过 handler 的处理。

1. 抽离校验模块

让我们从一个简单的类型校验开始做起，这个示例演示了如何使用 Proxy 保障数据类型的准确性：

let numericDataStore = { 
  count: 0,
  amount: 1234,
  total: 14
};

numericDataStore = new Proxy(numericDataStore, { 
  set(target, key, value, proxy) {
    if (typeof value !== 'number') {
      throw Error("Properties in numericDataStore can only be numbers");
    }
    return Reflect.set(target, key, value, proxy);
  }
});

// 抛出错误，因为 "foo" 不是数值
numericDataStore.count = "foo";

// 赋值成功
numericDataStore.count = 333;