JS proxy

Proxy Object is used to create a proxy for an object , So as to achieve the interception and customization of basic operations （ Such as attribute search 、 assignment 、 enumeration 、 Function calls, etc ）.

grammar

// target:  To use  Proxy  The target object of the wrapper （ It can be any kind of object , Including native arrays , function , Even another agent ）.
// handler:  An object , The property value of this object is usually a function , When various operations of the proxy are defined p act . The attribute names on the object are specific and optional , If there is no attribute , The default behavior of the source object is preserved .
const p = new Proxy(target, handler)

handler There are ways to object ：

These methods and Reflect There is an obvious correspondence between the methods of ：

//  Intercept  Proxy  Instance as an operation of a function call , such as proxy(...args)、proxy.call(object, ...args)、proxy.apply(...).
handler.apply(target, thisArg, args)	
//  Intercept  Proxy  Operation called by instance as constructor , such as new proxy(...args).
handler.construct(target, args)
//  Block the reading of object properties , such as proxy.foo and proxy['foo'].
handler.get(target, name, receiver)
//  Setting of intercepting object properties , such as proxy.foo = v or proxy['foo'] = v, Returns a Boolean value .
handler.set(target, name, value, receiver)
//  Intercept Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs), Returns a Boolean value .
handler.defineProperty(target, name, desc)
//  Intercept delete proxy[propKey] The operation of , Returns a Boolean value .
handler.deleteProperty(target, name)
//  Intercept propKey in proxy The operation of , Returns a Boolean value .
handler.has(target, name)
//  Intercept Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in loop , Returns an array . This method returns the property names of all the properties of the target object , and Object.keys() The return result of contains only the traversable properties of the target object itself .
handler.ownKeys(target)
//  Intercept Object.isExtensible(proxy), Returns a Boolean value .
handler.isExtensible(target)
//  Intercept Object.preventExtensions(proxy), Returns a Boolean value .
handler.preventExtensions(target)
//  Intercept Object.getOwnPropertyDescriptor(proxy, propKey), Returns the description object of the property .
handler.getOwnPropertyDescriptor(target, name)
//  Intercept Object.getPrototypeOf(proxy), Return an object .
handler.getPrototypeOf(target)
//  Intercept Object.setPrototypeOf(proxy, proto), Returns a Boolean value . If the target object is a function , Then there are two additional operations to intercept .
Reflect.setPrototypeOf(target, prototype)

Use scenario example

1. Data is read-only

let data = new Proxy(response.data, {
    
  set(obj, key, value) {
    
    return false
  }
})

class Component {
    
  constructor () {
    
    this.proxy = new Proxy({
    
      id: Math.random().toString(36).slice(-8)
    })
  }
  get id () {
    
    return this.proxy.id
  }
}

2. data verification

// Validator.js
export default (obj, key, value) => {
    
  if (Reflect.has(key) && value > 20) {
    
    obj[key] = value
  }
}

import Validator from './Validator'
let data = new Proxy(response.data, {
    
  set: Validator
})

Create cancelable proxy

Proxy.revocable() Method returns a cancelable Proxy example .
Proxy.revocable() Method returns an object , The object proxy The attribute is Proxy example ,revoke Property is a function , May cancel Proxy example .
When executed revoke After the function , Revisit Proxy example , Will throw a mistake .
Proxy.revocable() A usage scenario for is , The target object does not allow direct access to , Must be accessed through a proxy , Once the visit is over , Take back the agency , Not allowed to visit again .

let target = {
    };
let handler = {
    };

let {
    proxy, revoke} = Proxy.revocable(target, handler);

proxy.foo = 123;
proxy.foo // 123

revoke();
proxy.foo // TypeError: Revoked