Proxy小结

每天做个总结吧，坚持就是胜利！

    /**
        @date 2021-06-20
        @description Proxy小结
    */

壹（序）

Proxy用于创建一个对象的代理，可以实现对该对象的基本操作（如读取，设置等）的拦截及自定义；

传入两个参数：

1. 需要设置代理的对象
2. 捕捉器对象

关键在于捕捉器对象的处理，此对象可以配置13种对目标对象的处理，如get，set，new等，每一个都必须是函数，否则报错，下面介绍13种捕捉器

贰（捕捉器）

1. get

/**
*  用于捕捉对目标对象的读取操作，接收三个参数：
*  1. target：目标对象
*  2. propName： 读取的属性名
*  3. receiver：当前的Proxy对象（可选）
*/
const p = new Proxy({}, {
    get() {
        return 1
    }
});

console.log(p.a); // 1
// 可以看到，我们传入的目标对象只是一个空对象，不设置get捕捉器的话，p.a应该是undefined，但是此时全部返回1

/**
* 可以利用getter对目标对象的读取做一些特殊处理
* 比如拥有一个书名数组，我们想要在读取的时候自动加上书名号
*/
const arr = ['JavaScript权威指南', 'JavaScript语言精粹'];
const p = new Proxy(arr, {
    get(target, propName) {
        return `《${target[propName]}》`
    }
});

console.log(p[0]); // "《JavaScript权威指南》"

2. set

/**
* 用于捕获设置值时的操作，接收四个参数：
*  1. target：目标对象
*  2. propName： 读取的属性名
*  3. value：新设置的值
*  4. receiver：当前的Proxy对象（可选）
* 返回是否设置成功
*/

// 加上书名号
const p = new Proxy(
  [],
  {
    set(target, propName, value) {
       target[propName] = `《${value}》`;

      return true;
    },
  }
);

p[0] = '你不知道的JS';

console.log(p[0]); // "《你不知道的JS》"

3. has

/**
* in操作符的捕捉器，接收两个参数：
*  1. target：目标对象
*  2. propName： 读取的属性名
* 返回propName是否在target的原型链上
*/

// 任何时候使用in操作符都返回true
const p = new Proxy(
  {},
  {
    has(target, propName) {
        return true;
    },
  }
);

console.log('a' in p); // true

4. construct

/**
* 用于捕捉new操作符，所以传入的目标对象必须有constructor，否则对生成后的Proxy对象执行new操作会报错
* 接收三个参数：
*  1. target：目标对象
*  2. argumentsList：constructor的参数列表
*  3. newTarget：最初被调用的构造函数
*/

// 对构造函数执行new操作时，始终返回一个空数组
function Person() {
    this.name = 'E1e';
}

const newPerson = new Proxy(Person, {
  construct: function(target, argumentsList, newTarget) {
    return []
  }
});

console.log(new newPerson()); // []

5. apply

/**
* 函数调用时的捕捉器，接收三个参数：
*  1. target：目标对象
*  2. thisArg：被调用时的上下文对象
*  3. argumentsList：constructor的参数列表
*/
// 将一个计算和函数拦截，修改成计算积
function getSum(a, b) {
    return a + b
}

getSum(2, 3); // 5

const getproduct = new Proxy(sum, {
    apply(target, thisAarg, argumentsList) {
        return argumentsList[0] * argumentsList[1]
    }
});

getproduct(2, 3); // 6

6. getPrototypeOf：Object.getPrototypeOf 方法的捕捉器。
7. setPrototypeOf：Object.setPrototypeOf 方法的捕捉器。
8. isExtensible：Object.isExtensible 方法的捕捉器。
9. preventExtensions：Object.preventExtensions 方法的捕捉器。
10. getOwnPropertyDescriptor：Object.getOwnPropertyDescriptor 方法的捕捉器。
11. defineProperty：Object.defineProperty 方法的捕捉器。
12. deleteProperty：delete 操作符的捕捉器。
13. ownKeys：Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。