Make a summary every day, persistence is victory!

/** @date 2021-06-20 @description Proxy */Copy the code

One (sequence)

Proxy A Proxy used to create an object. It can intercept and customize basic operations (such as reading and setting) on the object.

Two arguments are passed:

  1. The object for which the proxy needs to be set
  2. Catcher object

The key is the handling of the trap object. This object can be configured with 13 kinds of processing for the target object, such as GET, set, new, etc. Each of them must be a function, otherwise an error will be reported

Ii (Catcher)

  1. get
/** * Is used to capture read operations on the target object, receiving three parameters: * 1. Target: the target object * 2. PropName: the read property name * 3. */ const p = new Proxy({}, {get() {return 1}}); console.log(p.a); / / 1 / / as you can see, we are introduced to the target object is only an empty object, do not set the get trap, p.a should be undefined, but this time all return 1 / * * * can be read using the getter to target to do some special processing * such as having a title array, */ const arr = ['JavaScript authoritative Guide ', 'JavaScript language essence ']; Const p = new Proxy(arr, {get(target, propName) {return '${target[propName]}'}}); console.log(p[0]); // "the Definitive JavaScript Guide"Copy the code
  1. set
PropName: read property name * 3. Value: new set value * 4. Receiver: Const p = new Proxy([], {set(target, propName, Value) {target[propName] = '${value}'; return true; }}); P [0] = 'JS you don't know '; console.log(p[0]); // "JS you don't know"Copy the code
  1. has
/** * The catcher for the in operator, which takes two arguments: * 1. Target: the target object * 2. PropName: */ / Const p = new Proxy({}, {has(target, propName) { return true; }}); console.log('a' in p); // trueCopy the code
  1. construct
/** * Is used to catch the new operator, so the incoming target object must constructor, otherwise an error will be reported when performing the new operation on the generated Proxy object * receives three arguments: * 1. target: the target object * 2. argumentsList: Function Person() {this.name = 'E1e'; function Person() {this.name = 'E1e'; } const newPerson = new Proxy(Person, { construct: function(target, argumentsList, newTarget) { return [] } }); console.log(new newPerson()); / / []Copy the code
  1. apply
Target: the target object * 2. ThisArg: the context object when called * 3. ArgumentsList: 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); / / 6Copy the code
  1. GetPrototypeOf: object. getPrototypeOf method’s catcher.
  2. SetPrototypeOf: Object. SetPrototypeOf method’s catcher.
  3. IsExtensible: Object. IsExtensible method of the catcher.
  4. PreventExtensions: Object. Catcher for the preventExtensions method.
  5. The capture of getOwnPropertyDescriptor: Object. GetOwnPropertyDescriptor method.
  6. DefineProperty: Object. The catcher for the defineProperty method.
  7. DeleteProperty: The catcher for the delete operator.
  8. OwnKeys: Object. The method and Object getOwnPropertyNames. GetOwnPropertySymbols trap method.