本篇内容介绍了“JavaScript中代理的使用方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
什么是代理
Proxy的基本知识
handler对象方法
Proxy可以实现的
MDN上的定义:Proxy(也就是代理) 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。
官方的定义总是这么晦涩枯燥,那么究竟Proxy能做什么?
1.代理这个概念来自于元编程,就是一种你可以编写出一个可以读取、修改、分析、甚至生成新程序的程序。而JS可以通过Proxy和Reflect这两个对象来进行js元编程!!
2.Proxy就是代理,当我们不方便去访问某个对象或者不满足于简单的访问时,代理就可以作为“中间人”来帮助我们更好的来控制对象的操作!!
语法:
const handler = {};
let target = {};//目标对象
let userProxy = new Proxy(target,handler);//成功实现代理!!
userProxy.a = 1;
console.log(target.a);//1
console.log(target == userProxy);//false
target: 要使用 Proxy 包装的目标对象
handler: 一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理的行为。
OK!那么恭喜你,你已经掌握了Proxy的定义。
在使用中,需要我们去更多费神的是handler中代理行为的代码,它可以帮助我们来更好的使用Proxy
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 对象的方法
跟踪属性访问
当我们需要知道对象什么时候被访问、修改时。
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来判断。
“JavaScript中代理的使用方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。