ES6-Proxy
前言
Proxy， 也就是代理。设计模式中有一种叫做代理模式，可以用来实现AOP，拦截器。后端经常会用到。
那什么是代理模式，这样说吧。快到5.20了你想追个妹子，可惜没她联系方式，刚好你朋友认识她，你就请你的朋友代理你，捎信给她，表诉你的爱慕之情。就有点像读书那会的送情书。
代理在生活中很常见，董事长和助理之间是代理关系，你的领导和你之间也是代理，领导安排活，你就干。领导 ~ 你 ~ 活，这三者之间，你就是属于代理人，领导只管安排，然后你处理好，把结果给他看。是不是很简单？
开始进入正题
ES6 原生提供了 Proxy API ， 用来生成 Proxy 实例。
那 Proxy 在前端有什么用处呢
①、拦截和监视外部对对象的访问
②、降低函数或类的复杂度
③、在复杂操作前对操作进行校验或对所需资源进行管理
运用
一、如何使用 Proxy
let proxy = new Proxy(target, handler);
target 参数表示需要拦截的目标对象。
handler 参数是一个对象，用来定制拦截行为。
handler 支持 13 种拦截行为，如下：
get(target, property, receiver) //拦截对象属性的读取 set(target, property, value, receiver) //拦截对象属性的设置 has(target, property) // 拦截 property in target 的操作，返回布尔值 deleteProperty(target, property) // 拦截 delete target[property] 的操作，返回布尔值 apply(target, context, args) //拦截 Proxy实例作为函数调用的操作 construct(target, args) // 拦截 Proxy 实例作为构造函数调用的操作 ownKeys(target) //以下方法，分别拦截 Object对象 下对应的操作 //如 definedProperty 拦截 Object.defineProperty(proxy) 操作。 getOwnPropertyDescriptor(target, propKey) defineProperty(target, propKey, propDesc) preventExtensions(target) isExtensible(target) getPrototypeOf(target) setPrototypeOf(target, proto)
Proxy 功能强大，我们经常用到的是它的 get, set 方法。
举个栗子，拦截某个对象的属性读写。
let obj = { name: 'jk', age: 25 } let handler = { get(target, property, receiver) { let value = target[property]; console.log(`get ${property} value: ${value}`); return value; }, set(target, property, value, receiver) { console.log(`set ${property} value: ${value}`) } } let proxy = new Proxy(obj, handler); proxy.name // get name value: jk // jk proxy.age = 26; // set name value: 26 // 26
二、Proxy的用处
有的童鞋就会问，Proxy 到底有什么用处呢? 当然有用了，下面介绍下我能想到的用处。
① 实现 AOP
运用 Proxy 的 apply 方法。
我们有时候希望 在函数执行之前，先运行某函数，函数执行之后，再运行某函数。
先定义几个函数，后面会用到。
const log = (...args) => console.log(...args); const test = () => log('test'); const beforeTest = () => log('beforeTest'); const afterTest = () => log('afterTest');
最基本的实现：
const testBetter = (cur, before, after) => {
before();
cur();
after();
}
testBetter(test, beforeTest, afterTest);
说实话，我觉得上面的代码就可以了，没什么不好。。。。。
当然也有其他的方法：
之前没有 Proxy 的做法是利用 闭包实现一个装饰器模式，（ES7已实现 Decorator），如下：
Function.prototype.before = function(beforefn) { let _self = this; //存储 当前函数 return function() { beforefn.apply(_self, arguments); return _self.apply(this, arguments); } } Function.prototype.after = function(afterfn) { let _self = this; //存储 当前函数 return function() { var ret = _self.apply(this, arguments); afterfn.apply(this, arguments); return ret; } } const testBetter = test.before(beforeTest).after(afterTest); testBetter(); // beforeTest // test // afterTest
现在，我们有了 Proxy， 就可以更方便了。可以运用 Proxy 的 apply 方法来实现。
const createProxy = (target, handler) => new Proxy(target, handler); const createAop = (current, before, after) => { return createProxy(current, { apply(target, context, args) { before.call(context); Reflect.apply(...arguments); // target.apply(context, args); after.call(context) } }) } const testProxy = createAop(test, beforeTest, afterTest); testProxy(); // beforeTest // test // afterTest
我们可以用 boforeTest 和 afterTest 来打印一些我们调试所需要的信息，不就实现了一个简单的日志功能吗。
②、我们也可以用 Proxy 的 get 来过滤数据。
let grade = { age: [4, 5, , undefined, 6, 7, ,null, 8, , 9, 10] } //去除undefined 和 null let filterArr = (arr) => arr.filter(item => item !== undefined && item !== null); let proxy = new Proxy(grade, { get(target, property, receiver) { let value = target[property]; if ( Array.isArray(value) ) { return Reflect.apply(filterArr, window, [value]); } } }) proxy.age; // [4, 5, 6, 7, 8, 9, 10]
还可以实现其他的功能：拦截，数据校验，私有属性等等。
三、Proxy 如何取消。
Proxy.revocable方法返回一个可取消的 Proxy 实例。
let {proxy, revoke} = Proxy.revocable(target, handler);
文章只是叙述了 Proxy 的冰山一角，更多内容请移步我的参考链接。
今天先写到这里，如有错误之处，还望指出。谢谢。
参考
http://es6.ruanyifeng.com/#docs/proxy
https://www.w3cplus.com/javascript/use-cases-for-es6-proxies.html
