詳解es6中Proxy代理對象的作用

在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里面做更多邏輯的處理等等