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