【JS】Proxy(代理)

Proxy

ES6里的新增类，帮助创建一个代理，如果我们希望监听一个对象的相关操作，那么可以先创建一个代理对象（Proxy对象），之后对该对象的所有操作，都通过代理对象来完成，代理对象可以监听对原对象进行了哪些操作。可以通过重写捕获器trap（13种）完成想要的操作。也就是说对原对象进行访问控制和增加功能。
简单演示：

const obj = {
  name: "yyy",
  age: 88
}
//需要new Proxy对象，并且传入需要侦听的对象以及一个处理对象（可以称之为handler）const p = new Proxy(target, handler)
const objProxy = new Proxy(obj,{});
//{}默认不修改里面的捕捉器
console.log(objProxy.name);
console.log(objProxy.age);
objProxy.name = "ooo";//同时修改了obj里的name
console.log(obj.name);

输出：yyy 88 ooo

Proxy的set和get捕获器

set和get分别对应的是函数类型

set函数有四个参数：

1. target：目标对象（侦听的对象）
2. property：将被设置的属性key
3. value：新属性值
4. receiver：调用的代理对象

get函数有三个参数：

1. target：目标对象（侦听的对象）
2. property：被获取的属性key
3. receiver：调用的代理对象

const objProxy = new Proxy(foo,{
  //获取值时的捕获器
  get: function(target, key){
    console.log(target,`对象的${key}被访问了`);
    return target[key];
  },
  //设置值时的捕获器
  set: function(target, key, newValue){
    target[key] = newValue;
    console.log(`${target}对象的${key}被修改了`);
  }
});

Proxy的has和deleteProperty捕获器

  // 监听in的捕获器
  has: function(target, key) {
    console.log(`监听到对象的${key}属性in操作`, target)
    return key in target
  },

  // 监听delete的捕获器
  deleteProperty: function(target, key) {
    console.log(`监听到对象的${key}属性in操作`, target)
    delete target[key]
  }
  console.log("name" in objProxy);
  delete objProxy.name;

其他捕获器

1. handler.getPrototypeOf()
   Object.getPrototypeOf 方法的捕捉器。
2. handler.setPrototypeOf()
   Object.setPrototypeOf 方法的捕捉器。
3. handler.isExtensible()
   Object.isExtensible 方法的捕捉器。
4. handler.preventExtensions()
   Object.preventExtensions 方法的捕捉器。
5. handler.getOwnPropertyDescriptor()
   Object.getOwnPropertyDescriptor 方法的捕捉器。
6. handler.defineProperty()
   Object.defineProperty 方法的捕捉器。
7. handler.ownKeys()
   Object.getOwnPropertyNames 方法和
   Object.getOwnPropertySymbols 方法的捕捉器。
8. handler.has()
   in 操作符的捕捉器。
9. handler.get()
   属性读取操作的捕捉器。
10. handler.set()
    属性设置操作的捕捉器。
11. handler.deleteProperty()
    delete 操作符的捕捉器。
12. handler.apply()
    函数调用操作的捕捉器。
13. handler.construct()
    new 操作符的捕捉器。

12和13用于函数对象