您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“JavaScript中代理的使用方法”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
什么是代理
Proxy的基本知識(shí)
handler對(duì)象方法
Proxy可以實(shí)現(xiàn)的
MDN上的定義:Proxy(也就是代理) 對(duì)象用于定義基本操作的自定義行為(如屬性查找,賦值,枚舉,函數(shù)調(diào)用等)。
官方的定義總是這么晦澀枯燥,那么究竟Proxy能做什么?
1.代理這個(gè)概念來自于元編程,就是一種你可以編寫出一個(gè)可以讀取、修改、分析、甚至生成新程序的程序。而JS可以通過Proxy和Reflect這兩個(gè)對(duì)象來進(jìn)行js元編程!!
2.Proxy就是代理,當(dāng)我們不方便去訪問某個(gè)對(duì)象或者不滿足于簡單的訪問時(shí),代理就可以作為“中間人”來幫助我們更好的來控制對(duì)象的操作?。?/p>
語法:
const handler = {}; let target = {};//目標(biāo)對(duì)象 let userProxy = new Proxy(target,handler);//成功實(shí)現(xiàn)代理?。? userProxy.a = 1; console.log(target.a);//1 console.log(target == userProxy);//false
target: 要使用 Proxy 包裝的目標(biāo)對(duì)象
handler: 一個(gè)通常以函數(shù)作為屬性的對(duì)象,各屬性中的函數(shù)分別定義了在執(zhí)行各種操作時(shí)代理的行為。
OK!那么恭喜你,你已經(jīng)掌握了Proxy的定義。
在使用中,需要我們?nèi)ジ噘M(fèi)神的是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
當(dāng)然還有其他更多的方法請(qǐng)參考MDN:handler 對(duì)象的方法
跟蹤屬性訪問
當(dāng)我們需要知道對(duì)象什么時(shí)候被訪問、修改時(shí)。
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';
解決對(duì)象屬性為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 (其實(shí)這一步已經(jīng)針對(duì)`target`創(chuàng)建了一個(gè)x.y的屬性) proxy.x.y.z = 'hello' console.log('z' in proxy.x.y) // true console.log(target.x.y.z) // hello
我們代理了get,并在里邊進(jìn)行邏輯處理,如果我們要進(jìn)行g(shù)et的值來自一個(gè)不存在的key,則我們會(huì)在target中創(chuàng)建對(duì)應(yīng)個(gè)這個(gè)key,然后返回一個(gè)針對(duì)這個(gè)key的代理對(duì)象。
這樣就能夠保證我們的取值操作一定不會(huì)拋出can not get xxx from undefined
但是這會(huì)有一個(gè)小缺點(diǎn),就是如果你確實(shí)要判斷這個(gè)key是否存在只能夠通過in操作符來判斷,而不能夠直接通過get來判斷。
“JavaScript中代理的使用方法”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。