代理
//es5 代理方式
let obj={}
let newVal=''
Object.defineProperty(obj,'name',{
get(){
console.log('get');
return newVal
},
set(val){
console.log('set');
newVal=val
}
})
obj.name='es' //set
console.log(obj.name); //get es
let obj={}
let p=new Proxy(obj,{})
p.name='hi'
console.log(obj.name); //hi
for(let key in obj){console.log(key);} //name
//es6中使用Reflect.defineProperty 將Object屬于語言內(nèi)部的方法放到Reflect上 更加規(guī)范
let obj={}
Object.defineProperty(obj,'name',{})
Reflect.defineProperty(obj,'name',{})
//返回boolean 修改某些Object方法的返回結(jié)果魔吐，讓其變得更合理
// if(Reflect.defineProperty()){}else{}
//讓Object操作變成函數(shù)行為
console.log('assign' in Object) //true
console.log(Reflect.has(Object,'assign')) //true
//Reflect對(duì)象的方法于Proxy對(duì)象的方法一一對(duì)應(yīng)
常用攔截方法
- get
攔截對(duì)象屬性的讀取憾筏，比如proxy.foo和proxy['foo']
// 判斷數(shù)組的下標(biāo)是否有值，有值返回值蔚舀，沒值返回下標(biāo)
let arr=[7,8,9]
arr=new Proxy(arr,{
get(target,prop){
// console.log(target,prop); //arr[1]->target [7,8,9],prop '1'
return prop in target ? target[prop] : 'error'
}
})
console.log(arr[1]); //8
console.log(arr[3]); //error
//字典翻譯，輸入hello返回你好阐滩，輸入字典沒有的返回原值
let dict={
'hello':'你好',
'world':'世界'
}
dict=new Proxy(dict,{
get(target,prop){
return prop in target ? target[prop] : prop
}
})
console.log(dict['world']); //世界
console.log(dict['good']); //good
- set
攔截對(duì)象屬性的設(shè)置虑省，返回一個(gè)布爾值斗搞，比如proxy.foo=v或proxy['foo']=v
//限制arr內(nèi)限制只能設(shè)置number值，其他值返回錯(cuò)誤
let arr=[]
arr=new Proxy(arr,{
set(target,prop,val){
if(typeof val==='number'){
target[prop]=val
return true
}else{
return false
}
}
})
arr.push(1)
console.log(arr[0]); //1
arr.push(2)
console.log(arr[1],arr.length); //2 2
- has
攔截propKey in proxy的操作慷妙，返回一個(gè)布爾值
//判斷是否在范圍內(nèi)僻焚，返回布爾型值
let range={
start:1,
end:5
}
range=new Proxy(range,{
has(target,prop){
return prop>=target.start && prop<=target.end
}
})
console.log(2 in range); //true
console.log(9 in range); //false
- ownKeys
攔截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)膝擂、Object.keys(proxy)虑啤、for...in循環(huán)，返回一個(gè)數(shù)組
//使用Symbol例子
let obj={
name:'daji',
[Symbol('es')]:'es'
}
console.log(Object.getOwnPropertyNames(obj)) //['name']
console.log(Object.getOwnPropertySymbols(obj)) //[Symbol(es)]
console.log(Object.keys(obj)) //['name']
for(let key in obj){
console.log(key); //name
}
//不想被遍歷出私有屬性以下劃線開頭的 _parssword 使用ownKeys
let userinfo={
name:'daji',
age:18,
_password:'***'
}
userinfo=new Proxy(userinfo,{
ownKeys(target){
return Object.keys(target).filter(key=>!key.startsWith('_'))
}
})
for(let key in userinfo){
console.log(key); //name age
}
console.log(Object.keys(userinfo)); //['name','age']
- deleteProperty
攔截delete proxy[proKey] 返回一個(gè)布爾值
//阻止對(duì)私有屬性的任何訪問 _password
let user={
name:'daji',
age:18,
_password:'***'
}
user=new Proxy(user,{
get(target,prop){ //不允許獲取
if(prop.startsWith('_')){
throw new Error('不可訪問')
}else{
return target[prop]
//return Reflect.get(target,prop)
}
},
set(target,prop,val){ //不允許設(shè)置 返回布爾型值
if(prop.startsWith('_')){
throw new Error('不可訪問')
}else{
target[prop]=val //Reflect.set(target,prop,val)
return true
}
},
deleteProperty(target,prop){ //不允許刪除 返回布爾型值
if(prop.startsWith('_')){
throw new Error('不可刪除')
}else{
delete target[prop] //Reflect.delete(target,prop)
return true
}
},
ownKeys(target){ //不允許遍歷
return Object.keys(target).filter(key=>!key.startsWith('_'))
//return Reflect.ownKeys(target).filter(key=>!key.startsWith('_'))
}
})
//get 測試
// console.log(user.age); //18
// console.log(user._password); //報(bào)錯(cuò)Error: 不可訪問
//set 測試
user.age=100
console.log(user.age); //100
//捕獲異常寫法
try{
user._password='xxx'
}catch(e){
console.log(e.message); //不可訪問
}
//刪除 測試
try{
delete user._password
}catch(e){
console.log(e.message); //不可刪除
}
//遍歷 測試
for(let key in user){
console.log(key); //name age
}
- apply
攔截函數(shù)調(diào)用架馋，apply和call操作
let sum=(...args)=>{
let num=0
args.forEach(item=>{
num+=item
})
return num
}
sum=new Proxy(sum,{
apply(target,ctx,args){ //ctx上下文
return target(...args)*2 //return Reflect.apply(target,target,[...args])*2
}
})
console.log(sum(1,2)); //6
console.log(sum.call(null,1,2,3)); //null不改變指向 12
console.log(sum.apply(null,[1,2,3])); //12
- construct
construct 攔截new 返回一個(gè)對(duì)象
let User=class{
constructor(name){
this.name=name
}
}
User=new Proxy(User,{
construct(target,args,newTarget){ //args構(gòu)造函數(shù)的參數(shù)
return new target(...args)
}
})
console.log(new User('hi')); // User {name: "hi"}
