Proxy

Proxy构造函数可以对目标对象进行代理，Proxy共有两个参数：需要代理的对象和处理程序对象

const person={
  name:'rice',
  age:19
};
const handler={};
const proxy=new Proxy(person,handler);

在代理对象(proxy)上执行的 都会应用到目标对象(person)上,因为这两个对象访问的是同一个值

proxy.name = 'jack';
person.age=19;
console.log(p.name,p.age); //jack 19
console.log(person.name,person.age); //jack 19

其中，handler处理程序对象有如下属性(不完全)

get

get()捕获器会在获取属性值时被调用，proxy.key=value 不会触发get()

1.参数

• target：目标对象(被代理的对象)
• key：属性名
• receiver：Proxy或继承Proxy的对象

2.拦截的操作

• proxy.key
• proxy[key]
• Object.create(proxy)[key]

3.返回值

返回值无限制

const proxy = new Proxy(person, {
  get(target, key, receiver) {
    if(key==='name'){
      return 'name:'+target[key];
    }
    return target[key]
  }
});

proxy.age; //get()
console.log(proxy.name) //执行了get() 并且返回 name:rice

set

set()捕获器会在设置属性值时被调用

1.参数

• target：目标对象(被代理的对象)
• key：属性名
• value：要赋值给属性的值
• receiver：Proxy实例本身

2.拦截的操作

• proxy.key=value
• proxy[key]=value
• Object.create(proxy)[key]=value

3.返回值

返回true表示成功；返回false表示失败

const proxy = new Proxy(person, {
  set(target,key,value,receiver){
    target[key]=value
    return true
  }
});

proxy.age=21 //set() proxy.age=21 person.age=21

完整代码

const person = {
  name: 'rice',
  age: 19
};

const proxy = new Proxy(person, {
  get(target, key, receiver) {
    console.log('执行了get()')
    if (key === 'name') {
      return 'name:' + target[key];
    }
    return target[key];
  },
  set(target, key, value, receiver) {
    console.log('执行了set()')
    target[key] = value;
    return true;
  }

});

proxy.age; //get()
console.log(proxy.name) //执行了get() 并且返回 name:rice

proxy.age = 21; //set() proxy.age=21 person.age=21