JavaScript Proxy基本用法詳解
1.語法
const proxy = new Proxy(target, handle);
- target,被代理的對象
- handle,攔截規(guī)則
2.基本用法
const obj = {}; const proxy = new Proxy(obj, { // target 目標(biāo)對象;propKey 屬性名;receiver 實(shí)例本身; get: function(target, propKey, receiver) { return 10; } }) console.log(proxy.a); // 10 console.log(proxy.b); // 10 console.log(obj.a); // undefined console.log(obj.b); // undefined
? 以上代碼對obj對象的get操作進(jìn)行了攔截,任何讀取操作都僅會返回10,且該操作只作用在代理對象proxy上,對原對象本身是不起作用的。
ps.若obj對象是不可寫及不可配置的,代理對象的返回值要與被代理對象的返回值保持一致;若被代理對象沒有配置get方位方法,即get方法是undefined,那么返回值必須是undefined
handle對象的常用方法:
方法 | 描述 |
---|---|
has | in操作符捕捉器 |
get | 屬性讀取操作符捕捉器 |
set | 屬性設(shè)置操作符讀取器 |
deleteProperty | delete操作符讀取器 |
ownKeys | Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。 |
apply | 函數(shù)調(diào)用捕捉器 |
construct | new操作符的捕捉器 |
3.可消除的Proxy
? Proxy有一個(gè)唯一的靜態(tài)方法Proxy.revocable(target, handler),可以用來創(chuàng)建一個(gè)可撤銷的代理對象,該方法的返回值是一個(gè)對象,其結(jié)構(gòu)為: {"proxy": proxy, "revoke": revoke}
。
- proxy 表示新生成的代理對象本身,和用一般方式 new Proxy(target, handler) 創(chuàng)建的代理對象沒什么不同,只是它可以被撤銷掉。
- revoke 撤銷方法,調(diào)用的時(shí)候不需要加任何參數(shù),就可以撤銷掉和它一起生成的那個(gè)代理對象。
ps.該方法常用于完全封閉對目標(biāo)對象的訪問。
4.Vue為什么要用Proxy重構(gòu)
? Vue3.0之前,雙向綁定主要是由defineProperty實(shí)現(xiàn)的。而defineProperty這個(gè)方法本身其實(shí)是存在不足的,比如說對于對象屬性增加、數(shù)組按下標(biāo)修改等一下操作無法做到原生實(shí)現(xiàn)。雖然Vue有提供相應(yīng)的手動observer方法,但在使用體驗(yàn)上還是不盡如人意的。而想較于defineProperty針對屬性進(jìn)行攔截,Proxy直接劫持了整個(gè)對象,即不需要對特殊的操作做單獨(dú)處理。
5.Proxy與defineProperty的對比
(1)Proxy作為新標(biāo)準(zhǔn),瀏覽器支持良好
(2)Proxy能觀察的類型比defineProperty
更豐富
(3)Proxy不兼容IE,也沒有polyfill,defineProperty
可以支持到IE9
(4)defineProperty
劫持對象的屬性,當(dāng)新增屬性時(shí),需要再次defineProperty
;Proxy直接劫持整個(gè)對象,不需要額外操作。
(5)defineProperty
在原對象本身進(jìn)行攔截操作,而Proxy只能在生成的攔截的對象上進(jìn)行攔截操作。
到此這篇關(guān)于JavaScript Proxy基本用法詳解的文章就介紹到這了,更多相關(guān)JS Proxy內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)崿F(xiàn)下拉刷新和上拉分頁效果的方法詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序動畫是如何實(shí)現(xiàn)下拉刷新和上拉分頁效果的,文中示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06JS+CSS實(shí)現(xiàn)滑動切換tab菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)滑動切換tab菜單效果,涉及javascript鼠標(biāo)事件及頁面元素樣式的動態(tài)切換效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08深入理解Javascript中的valueOf與toString
javascript中所有數(shù)據(jù)類型都擁有valueOf和toString這兩個(gè)方法,null除外。它們倆解決javascript值運(yùn)算與顯示的問題,本文將詳細(xì)介紹,有需要的朋友可以參考下2017-01-01Axios+Spring?Boot實(shí)現(xiàn)文件上傳和下載
這篇文章主要為大家詳細(xì)介紹了Axios+Spring?Boot實(shí)現(xiàn)文件上傳和下載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08