在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 新增的全局对象。
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;
如果要直接为对象的所有属性开发一个校验器可能很快就会让代码结构变得臃肿，使用 Proxy 则可以将校验器从核心逻辑分离出来自成一体：
function createValidator(target, validator) { return new Proxy(target, { _validator: validator, set(target, key, value, proxy) { if (target.hasOwnProperty(key)) { let validator = this._validator[key]; if (!!validator(value)) { return Reflect.set(target, key, value, proxy); } else { throw Error(`Cannot set ${key} to ${value}. Invalid.`); } } else { throw Error(`${key} is not a valid property`) } } }); } const personValidators = { name(val) { return typeof val === 'string'; }, age(val) { return typeof age === 'number' && age > 18; } } class Person { constructor(name, age) { this.name = name; this.age = age; return createValidator(this, personValidators); } } const bill = new Person('Bill', 25); // 以下操作都会报错 bill.name = 0; bill.age = 'Bill'; bill.age = 15;
通过校验器和主逻辑的分离，你可以无限扩展 personValidators 校验器的内容，而不会对相关的类或函数造成直接破坏。更复杂一点，我们还可以使用 Proxy 模拟类型检查，检查函数是否接收了类型和数量都正确的参数：
let obj = { pickyMethodOne: function(obj, str, num) { /* ... */ }, pickyMethodTwo: function(num, obj) { /*... */ } }; const argTypes = { pickyMethodOne: ["object", "string", "number"], pickyMethodTwo: ["number", "object"] }; obj = new Proxy(obj, { get: function(target, key, proxy) { var value = target[key]; return function(...args) { var checkArgs = argChecker(key, args, argTypes[key]); return Reflect.apply(value, target, args); }; } }); function argChecker(name, args, checkers) { for (var idx = 0; idx < args.length; idx++) { var arg = args[idx]; var type = checkers[idx]; if (!arg || typeof arg !== type) { console.warn(`You are incorrectly implementing the signature of ${name}. Check param ${idx + 1}`); } } } obj.pickyMethodOne(); // > You are incorrectly implementing the signature of pickyMethodOne. Check param 1 // > You are incorrectly implementing the signature of pickyMethodOne. Check param 2 // > You are incorrectly implementing the signature of pickyMethodOne. Check param 3 obj.pickyMethodTwo("wopdopadoo", {}); // > You are incorrectly implementing the signature of pickyMethodTwo. Check param 1 // No warnings logged obj.pickyMethodOne({}, "a little string", 123); obj.pickyMethodOne(123, {});
2. 私有属性