淺談es6語(yǔ)法 (Proxy和Reflect的對(duì)比)
如下所示:
{ //原始對(duì)象 let obj={ time:'2017-03-11', name:'net', _r:123 }; //(代理商)第一個(gè)參數(shù)代理對(duì)象,第二個(gè)參數(shù)真正代理的東西 let monitor=new Proxy(obj,{ // 攔截對(duì)象屬性的讀取 get(target,key){ return target[key].replace('2017','2018') }, // 攔截對(duì)象設(shè)置屬性 set(target,key,value){ if(key==='name'){ //賦值并返回 return target[key]=value; }else{ //不做操作直接返回 return target[key]; } }, // 攔截key in object操作 has(target,key){ if(key==='name'){ return target[key] }else{ return false; } }, // 攔截delete deleteProperty(target,key){ if(key.indexOf('_')>-1){ delete target[key]; return true; }else{ return target[key] } }, // 攔截Object.keys,Object.getOwnPropertySymbols,Object.getOwnPropertyNames ownKeys(target){ return Object.keys(target).filter(item=>item!='time') } }); console.log('get',monitor.time); //2018-03-11 //操作 monitor.time='2018'; monitor.name='mukewang'; console.log('set',monitor.time,monitor);//2018-03-11;{time: "2017-03-11", name: "mukewang", _r: 123} console.log('has','name' in monitor,'time' in monitor);//true;false delete monitor.time; console.log('delete',monitor);//{time: "2017-03-11", name: "mukewang", _r: 123} // delete monitor._r; console.log('delete',monitor);//{time: "2017-03-11", name: "mukewang"} console.log('ownKeys',Object.keys(monitor));//["name", "_r"] } { let obj={ time:'2017-03-11', name:'net', _r:123 }; console.log('Reflect get',Reflect.get(obj,'time'));//get 2017-03-11 Reflect.set(obj,'name','mukewang'); console.log(obj);//{time: "2017-03-11", name: "mukewang", _r: 123} console.log('has',Reflect.has(obj,'name'));//true }
以上這篇淺談es6語(yǔ)法 (Proxy和Reflect的對(duì)比)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 詳解ES6中的代理模式——Proxy
- 實(shí)例解析ES6 Proxy使用場(chǎng)景介紹
- ES6中Proxy與Reflect實(shí)現(xiàn)重載(overload)的方法
- 詳細(xì)探究ES6之Proxy代理
- ES6中Proxy代理用法實(shí)例淺析
- ES6之Proxy的get方法詳解
- JavaScript中的ES6 Proxy的具體使用
- ES6 Proxy實(shí)現(xiàn)Vue的變化檢測(cè)問(wèn)題
- ES6知識(shí)點(diǎn)整理之Proxy的應(yīng)用實(shí)例詳解
- ES6 proxy和reflect的使用方法與應(yīng)用實(shí)例分析
- ES6中javascript實(shí)現(xiàn)函數(shù)綁定及類的事件綁定功能詳解
- ES6使用新特性Proxy實(shí)現(xiàn)的數(shù)據(jù)綁定功能實(shí)例
相關(guān)文章
基于JavaScript實(shí)現(xiàn)瀏覽器添加收藏功能
今天搞項(xiàng)目的時(shí)候?yàn)榱藢?shí)現(xiàn)瀏覽者實(shí)現(xiàn)添加收藏的功能,特地了解了一下相關(guān)的API,整理了一段代碼幫助大家實(shí)現(xiàn)瀏覽器添加收藏功能,感興趣的朋友跟隨小編一起看看吧2023-02-02JavaScript實(shí)現(xiàn)對(duì)下拉列表值進(jìn)行排序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)對(duì)下拉列表值進(jìn)行排序的方法,實(shí)例分析了javascript對(duì)下拉列表元素的遍歷與排序?qū)崿F(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07js自定義trim函數(shù)實(shí)現(xiàn)刪除兩端空格功能
這篇文章主要介紹了js自定義trim函數(shù)實(shí)現(xiàn)刪除兩端空格功能,結(jié)合實(shí)例形式分析了javascript基于正則替換實(shí)現(xiàn)類似trim函數(shù)刪除字符串兩端空格的相關(guān)操作技巧,并附帶jQuery類似功能函數(shù)使用方法,需要的朋友可以參考下2018-02-02微信小程序結(jié)合mock.js實(shí)現(xiàn)后臺(tái)模擬及調(diào)試
這篇文章主要介紹了微信小程序結(jié)合mock.js實(shí)現(xiàn)后臺(tái)模擬及調(diào)試,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03微信小程序注冊(cè)60s倒計(jì)時(shí)功能 使用JS實(shí)現(xiàn)注冊(cè)60s倒計(jì)時(shí)功能
這篇文章主要介紹了微信小程序注冊(cè)60s倒計(jì)時(shí)功能,以及使用JS實(shí)現(xiàn)注冊(cè)60s倒計(jì)時(shí)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08JS正則表達(dá)式修飾符中multiline(/m)用法分析
這篇文章主要介紹了JS正則表達(dá)式修飾符中multiline(/m)用法,結(jié)合實(shí)例形式分析了JS正則中多行模式multiline的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
這篇文章主要介紹了Bootstrap導(dǎo)航欄各元素操作方法,針對(duì)表單、按鈕、文本進(jìn)行操作,感興趣的小伙伴們可以參考一下2015-12-12