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

曾经终败给现在 2022-04-24 03:52 188阅读 0赞

在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'))

最终输出结果：  
![在这里插入图片描述][20190414215146427.png]

我们就实现了，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属性为不可写属性

![在这里插入图片描述][20190414215238886.png]  
我们会发现最终结果还是男并没有修改成功

接下来我们就再利用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方法结果如下

![在这里插入图片描述][20190414215408315.png]

*  set方法就是当通过p1设置数据的时候会触发，内部有三个形参，第一个还是target，第二个还是key，第三个为value也就是设置的值
 *  那么我们就可以通过key来判断，如果key为sex就代表你要设置sex就给错误提示
 *  否则就通过target\[key\] = value给设置数据

以上就是Proxy的使用方法了，相对es3和es5而言Proxy感觉还是很好的，因为可以在set里面做更多逻辑的处理等等

如果学会了，点下赞吧！！！谢谢

[20190414215146427.png]: /images/20220220/68096e3f119e42b4a314e7302c08e00b.png
[20190414215238886.png]: /images/20220220/ed466bbb87154b7a9e125745300715f4.png
[20190414215408315.png]: /images/20220220/8a3ffc656ef045dd90d938533770cb1a.png