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

巴特西

详解es6中Proxy代理对象的作用

最新文章

热门文章