JS Proxy(代理)

什么是 proxy 代理

Proxy 也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，就是在我们访问对象前添加了一层拦截，可以过滤很多操作，而这些过滤，由你来定义。

let p = new Proxy(target, handler);

参数

1，target ：需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
2，handler: 一个对象，其属性是当执行一个操作时定义代理的行为的函数(可以理解为某种触发器)。具体的handler相关函数请查阅官网

下面是使用示例，一个简单的代理:

let test = {
    name: "小红"
  };
  test = new Proxy(test, {
    get(target, key) {
      console.log('获取了getter属性');
      return target[key];
    }
  });
  console.log(test.name);

image.png

let xiaohong = {
    name: "小红",
    age: 15
  };
  xiaohong = new Proxy(xiaohong, {
    get(target, key) {
    console.log('获取值的时候执行----')
      let result = target[key];
  // target 是xiaohong = {
   // name: "小红",
    //age: 15
  //};

//key 是 name  age
      //如果是获取 年龄 属性，则添加 岁字
      if (key === "age") result += "岁";
      return result;
    },
    set(target, key, value) {
 console.log('赋值的时候执行----')
// target 是xiaohong = {
   // name: "小红",
    //age: 15
  //};
//key 是 name  age
//value 小红 15
      if (key === "age" && typeof value !== "number") {
        throw Error("age字段必须为Number类型");
      }
      return Reflect.set(target, key, value);
    }
  });
  console.log(`我叫${xiaohong.name}  我今年${xiaohong.age}了`);
  xiaohong.age = "aa";

  console.log(test.name);
test.age=888

获取值的时候执行---- get console.log(test.name);

赋值的时候执行---- set test.age=888