详解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里面做更多逻辑的处理等等