Es6中Proxy实现数据的拦截和响应

Proxy的作用

Proxy: 实现数据的拦截和响应 （vue3中可以实现数据的双向绑定）
和vue的数据双向绑定拦截不一样,Proxy拦截的是整个对象,(拦截对象的所有属性);算是接管了对象
(ts类视频16分讲解)
官方解释:Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”

let person = {
         name:'tom',
         age:18
     }
     let px =new Proxy(person,{
        get:function(){
            
        },
        set:function(){

        }
     })
     console.log(px.name);//undefined

我们看到px.name 输出未定义,这就是被拦截了

被拦截后就可以对外界的访问进行过滤和改写

<script>
    let person = {
        name: 'tom',
        age: 18
    }
    let px = new Proxy(person, {
        get: function (target, propKey, receiver) {
            return 'hello world';
        },
        set: function () {
        }
    })
    console.log(px.age);//hello world
</script> 

我们看到他输出了过滤后的值

get方法(设置)中四个参数的意义

set方法(设置)中四个参数的意义

<script>
    let person = {
        name: 'tom',
        age: 18
    }
    let px = new Proxy(person, {
        get: function () {
           
        },
        set: function (target, propKey, value, receiver) {
            console.log(target); / target 是代理的目标对象 person
            console.log(propKey); / propkey  是 对象的属性key
            console.log(value); / value 是 设置的值
            console.log( receiver); / Proxy 实例对象
        }
    })
    /设置
    px.name = '张三'
</script>

看下四个参数输出分别是什么

那么我们设置过值该如何正确输出呢,看下面

 <script>
    let person = {
        name: 'tom',
        age: 18
    }
    let px = new Proxy(person, {
        get: function (target, propKey, receiver) {
           return target[propKey];
        },
        set: function (target, propKey, value, receiver) {
          //  console.log(value); // value 是 设置的值
            target[propKey] = value;
        }
    })
    //设置
    px.name = '张三';
    console.log(px.name);//张三
</script> 

如果不在set中return 那么他的px.name的输出就是undefined
这里在get中return target[propKey];
(target[propKey]就是设置的值,把set中设置的值给get,让他return)