ES6-Proxy理解

Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

1.使用proxy(),首先要实例化proxy()对象

let per = new Proxy(person,{})

person：第一个参数代表的是要代理的对象

{}： 第二个参数传入要定义的属性

2.定义get方法和set方法

get:function(target, propKey, recevier){
        console.log(11111, target, propKey);
        // return 'hello'
        return target[propKey]
    },

target： 目标对象
propKey: 目标对象的属性
recevier： 可选的 实例化对象

set:function(target, propKey, value, recevier){
        //  value 设置的新值
        console.log(2222, value);
        target[propKey]  = value;
}

target： 目标对象
propKey: 目标对象的属性

value： 设置的新值

recevier： 可选的 实例化对象

2.代码示例

let person = {
    name:'李四',
    age:19,
    sex:'男'
}
//  通过 Proxy() 代理对象后，不能再操作原对象了，而是操作实例化对象
let per = new Proxy(person, {
   get:function(target, propKey, recevier){
        console.log(target, propKey);
    },
   set:function(target, propKey, value, recevier){

    }
})

console.log(person.name); //李四

不使用拦截器进行访问,是不生效的，因为这时拦截器没有进行拦截

3.下面使用代理对象per进行访问,这时拦截器就会生效

console.log(per.name); 

输出结果：

{name: '李四', age: 19, sex: '男'} '

name'

通过 Proxy() 代理对象后，不能再操作原对象了，而是操作实例化对象

4.先对per.name进行设置，然后进行访问,会先执行set方法

//对set方法进行设置
set: function (target, propKey, value, recevier) {
    target[propKey] = value;
}

per.name = '张三';
console.log(per.name);

输出结果

张三

{name: '张三', age: 19, sex: '男'} 'name'