淺談es6語法 (Proxy和Reflect的對比)
更新時間:2017年10月24日 08:35:32 作者:abcByme
下面小編就為大家?guī)硪黄獪\談es6語法 (Proxy和Reflect的對比)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
如下所示:
{
//原始對象
let obj={
time:'2017-03-11',
name:'net',
_r:123
};
//(代理商)第一個參數(shù)代理對象,第二個參數(shù)真正代理的東西
let monitor=new Proxy(obj,{
// 攔截對象屬性的讀取
get(target,key){
return target[key].replace('2017','2018')
},
// 攔截對象設置屬性
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語法 (Proxy和Reflect的對比)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 詳解ES6中的代理模式——Proxy
- 實例解析ES6 Proxy使用場景介紹
- ES6中Proxy與Reflect實現(xiàn)重載(overload)的方法
- 詳細探究ES6之Proxy代理
- ES6中Proxy代理用法實例淺析
- ES6之Proxy的get方法詳解
- JavaScript中的ES6 Proxy的具體使用
- ES6 Proxy實現(xiàn)Vue的變化檢測問題
- ES6知識點整理之Proxy的應用實例詳解
- ES6 proxy和reflect的使用方法與應用實例分析
- ES6中javascript實現(xiàn)函數(shù)綁定及類的事件綁定功能詳解
- ES6使用新特性Proxy實現(xiàn)的數(shù)據(jù)綁定功能實例
相關文章
elementUI?Table?表格編輯數(shù)據(jù)后停留當前位置的示例代碼
這篇文章主要介紹了elementUI?Table?表格編輯數(shù)據(jù)后停留當前位置,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
js實現(xiàn)iframe框架取值的方法(兼容IE,firefox,chrome等)
這篇文章主要介紹了js實現(xiàn)iframe框架取值的方法,可兼容IE,firefox,chrome等瀏覽器.涉及JavaScript針對框架元素取值的相關技巧,需要的朋友可以參考下2015-11-11
javascript將扁平的數(shù)據(jù)轉為樹形結構的高效率算法
這篇文章主要介紹了javascript將扁平的數(shù)據(jù)轉為樹形結構的高效率算法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
基于JS實現(xiàn)網(wǎng)頁中的選項卡(兩種方法)
這篇文章主要介紹了用js語句實現(xiàn)網(wǎng)頁中的選項卡(兩種方法),非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-06-06

