|
什么是代理MDN上的定义：Proxy（也就是代理） 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。 官方的定义总是这么晦涩枯燥，那么究竟Proxy能做什么？ 1.代理这个概念来自于元编程，就是一种你可以编写出一个可以读取、修改、分析、甚至生成新程序的程序。而JS可以通过Proxy和Reflect这两个对象来进行js元编程！！ 2.Proxy就是代理，当我们不方便去访问某个对象或者不满足于简单的访问时，代理就可以作为“中间人”来帮助我们更好的来控制对象的操作！！
Proxy的基本知识语法： const handler = {};let target = {};//目标对象let userProxy = new Proxy(target,handler);//成功实现代理！！userProxy.a = 1;console.log(target.a);//1console.log(target == userProxy);//falsetarget: 要使用 Proxy 包装的目标对象
handler: 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理的行为。 OK！那么恭喜你，你已经掌握了Proxy的定义。 在使用中，需要我们去更多费神的是handler中代理行为的代码，它可以帮助我们来更好的使用Proxy
handler对象方法const handler = { get(target,prop,receiver){ console.log('get!'); return 'a'; }}let target = {name:'tar'};let userProxy = new Proxy(target,handler);userProxy.name当然还有其他更多的方法请参考MDN：handler 对象的方法
Proxy可以实现的跟踪属性访问
当我们需要知道对象什么时候被访问、修改时。 let target = { name:'ww' } const handlers = { get(tar, prop){ console.log('get'); return Reflect.get(...arguments); }, set(tar,prop){ console.log('set'); return Reflect.set(...arguments); } } let userProxy = new Proxy(target, handlers); userProxy.name; userProxy.name = 'wqw';解决对象属性为undefined的问题 let target = {} let handlers = { get: (target, property) => { target[property] = (property in target) ? target[property] : {} if (typeof target[property] === 'object') { return new Proxy(target[property], handlers) } return target[property] } } let proxy = new Proxy(target, handlers) console.log('z' in proxy.x.y) // false (其实这一步已经针对`target`创建了一个x.y的属性) proxy.x.y.z = 'hello' console.log('z' in proxy.x.y) // true console.log(target.x.y.z) // hello我们代理了get，并在里边进行逻辑处理，如果我们要进行get的值来自一个不存在的key，则我们会在target中创建对应个这个key，然后返回一个针对这个key的代理对象。
这样就能够保证我们的取值操作一定不会抛出can not get xxx from undefined
但是这会有一个小缺点，就是如果你确实要判断这个key是否存在只能够通过in操作符来判断，而不能够直接通过get来判断。
参考资料：MDN-Proxy JS-设计模式 Proxy可以做哪些有趣的事情 元编程
总结本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注wanshiok.com的更多内容！
JavaScript--在Vue中使用插槽:slot
Echart Bar双柱状图样式最全详解 |
