在es6中新添加了Proxy,那么它有什么作用啊?Proxy本意為代理,而es6中的Proxy也就是代理對象,那么代理對象感覺聽起來很模糊,在這里就解釋一下Proxy代理對象的作用。
Proxy的主要作用就是可以對 對象進行攔截,以及對數據讀取、修改的過濾保護。
我們先利用es3的方式來實現一個需求,現有一數據,內部有name、age、sex三個屬性,name、age屬性可讀可寫,但是sex屬性只可讀,不可寫
分析步驟:
我們可以定義一個構造函數,內部定義一個data數據,包含這三個屬性
我們還要暴露兩個方法,一個get,一個set
get用來讀數據,set用來寫數據,在寫數據的時候判斷,如果想設置sex這個屬性,我們就給錯誤提示
var Person = function(){
var data = {
name:'monkey',
age:18,
sex:'男'
}
this.get = function(key){
console.log(key)
return data[key]
}
this.set = function(key,value){
if(key!=='sex'){
return data[key] = value
}else{
throw '該屬性為只讀屬性'
}
}
}
var person = new Person;
var name = person.get('name')
person.set('sex','女')
console.log(person.get('sex'))
最終輸出結果:
我們就實現了,name可讀可寫,sex卻不能修改
然后我們再利用es5的方式來實現,es5知道defineProperty這個方法的實現就簡單很多了
var person = {
name:'monkey',
age:30
}
Object.defineProperty(person,'sex',{
writable:false,
value:'男'
})
person.sex = '女'
console.log(person.sex)
我們通過defineProperty設置sex屬性為不可寫屬性

我們會發現最終結果還是男並沒有修改成功
接下來我們就再利用es6的Proxy來實現
var person = {
name:'monkey',
age:19,
sex:'男'
}
var p1 = new Proxy(person,{
get(target,key){
console.log(target)
console.log(key)
return target[key]
},
set(target,key,value){
if(key=='sex'){
throw '不允許修改sex'
}else{
target[key] = value
}
}
})
p1.name
p1.sex = '女'
我們來分析下上面的代碼,
定義了一個person數據
通過new Proxy得到代理對象p1
Proxy第一個參數為要攔截的對象,第二個參數為對象,對象內部有get和set方法
get方法是通過p1讀數據的時候會調用,get方法有兩個參數,target為目標數據也就是person,key就是通過p1讀數據時候的key
例如上面代碼20行讀取數據了,就會觸發get方法結果如下
set方法就是當通過p1設置數據的時候會觸發,內部有三個形參,第一個還是target,第二個還是key,第三個為value也就是設置的值
那么我們就可以通過key來判斷,如果key為sex就代表你要設置sex就給錯誤提示
否則就通過target[key] = value給設置數據
以上就是Proxy的使用方法了,相對es3和es5而言Proxy感覺還是很好的,因為可以在set里面做更多邏輯的處理等等
