代理模式在javascript中能够应用Proxy对象，能够更好的去管制一些对象的交互，既然谈到了Proxy，咱们先简略理解一下Proxy到底是干什么的
Proxy
Proxy是用来创立一个对象的代理，实现对对象的拦挡。比方对象属性的查找、赋值、枚举、函数调用等操作。语法如下
const p = new Proxy(target, handler)// target 要代理的指标对象// handler 对象，对象中定义了对target操作时要执行的一些操作根底应用事例
const handler = { get: function(obj, prop) { return prop in obj ? obj[prop] : 'FE情报局' }}const target = {}const p = new Proxy(target, handler)p.a = 1p.b = undefinedconsole.log(p.a, p.b) // 1, undefinedconsole.log('c' in p, p.c) // false, FE情报局原来的target上也有对应的属性a和b，然而要留神，从 target取值的时候并没有走代理，也就是target.c为undefined，target.a等于1
这样咱们能够通过代理来对对象取值进行辨别，比方对于一些不存在的属性，在取值的时候返回null
代理模式
其实Proxy就是一个代理模式，代理的是一个指标对象，下面的例子也表明它能够将对象的变动做一层代理，任何操作都须要通过此代理做一些额定的操作
你能够将其设想成咱们的抓包工具，网络申请进来或者收回都要通过抓包，对其进行一些批改或者解决再给到服务器或者客户端，这种也被称为代理模式
例子
这种模式在咱们的我的项目中具体有什么作用呢？下面咱们提到了，能够将不存在的属性设置为null
const handler = { get: function(obj, prop) { return prop in obj ? obj[prop] : null }}const target = {}const p = new Proxy(target, handler)// p.a => null数据验证
代理也可能帮咱们进行数据验证，可能让指标对象中的数据放弃纯正，不会有一些意外的状况
const handler = { set: function(obj, prop, value) { if(prop === 'age' && value > 0 && value < 100){ obj['age'] = value return true }else{ throw new Error('age的值不符合要求，无奈批改') } }}const target = { age: 10}const p = new Proxy(target, handler)// p.a => null断点调试
针对一些有问题的数据，你能够进行一些断点或者log的操作，来看何时何地将什么内容设置为谬误的数据
const handler = { set: function(obj, prop, value) { console.log(`set ${prop} from ${obj[prop]} to ${value}`); obj[prop] = value; return true }}const target = {}const p = new Proxy(target, handler)p.a = 1p.a = 2// set a from undefined to 1// set a from 1 to 2格式化数据
const handler = { set: function(obj, prop, value) { obj[prop] = Number(value); return true }}const target = {}const p = new Proxy(target, handler)p.age = '10'// p.age => 10扩大对象办法
target能够是任何一个对象，包含数组，所以咱们能够通过属性查找数组中的内容
const handler = { get: function(obj, prop, value) { if(prop in obj){ return obj[prop] } let result = null for(let item of obj){ if(item.value === prop){ result = item } } if(result){ return result } return undefined }}const target = [ { label: '苹果', value: 'apple' }, { label: '香蕉', value: 'banana' }]const p = new Proxy(target, handler)// p.length => 2// p.apple => {label: '苹果', value: 'apple'}// p[0] => {label: '苹果', value: 'apple'}总结
代理的确可能不便咱们一些操作，并且制订一些通用的handler可能解决咱们很多的问题，然而任何货色都要有一个适度，适度应用代理的形式很容易对利用的性能造成肯定的影响，所以对于一些要害的代码最好不要应用代理
代理还有一点就是在你排查问题的时候可能会有些艰难，比方设置的某一个值不合乎你的预期，或者应用的某一个值也不合乎你的预期，然而你却不晓得你在哪里改了它