proxy

2021.12.31
#xxx#xxx
use client /components/post/reExport ,
  date:  ,
  tags: [ ],
  imgUrl:  ,
  desc: [ ],
  body: (
    <>
      <ul>
        <li>Proxy - object wraps another object and intercepts operations, like reading/writing properties</li>
        <li>Proxy provide a way to tweak the behavior of the existing objects at the lowest level</li>
        <li>Proxy is more powerful than just a fn wrapper, as it forwards everything to the target object</li>
      </ul>

      <H>Syntax</H>

      <p>
        <Code>let proxy = new Proxy(target, handler)</Code> <br />
        <code>target</code> - object to wrap, can be anything, including functions <br />
        <code>handler</code> – proxy configuration: an object with “traps”, methods that intercept operations
      </p>

      <H>Handler methods</H>

      <p>
        Triggers when <br />
        <code>get</code> - reading a property <br />
        <code>set</code> - writing to a property <br />
        <code>has</code> - in operator <br />
        <code>deleteProperty</code> - delete operator <br />
        <code>apply</code> - function call <br />
        <code>construct</code> - new operator <br />
        <code>getPrototypeOf</code> - <code>Object.getPrototypeOf</code> <br />
        <code>setPrototypeOf</code> - <code>Object.setPrototypeOf</code> <br />
        <code>isExtensible</code> - <code>Object.isExtensible</code> <br />
        <code>preventExtensions</code> - <code>Object.preventExtensions</code> <br />
        <code>defineProperty</code> - <code>Object.defineProperty</code>, <code>Object.defineProperties</code> <br />
        <code>getOwnPropertyDescriptor</code> - <code>Object.getOwnPropertyDescriptor</code>, <code>for...in</code>, <code>Object.keys/values/entries</code> <br />
        <code>ownKeys</code> - <code>Object.getOwnPropertyNames</code>, <code>Object.getOwnPropertySymbols</code>, <code>for...in</code>, <code> Object.keys/values/entries</code> <br />
      </p>

      <H>No own properties</H>

      <p>With an empty handler it transparently forwards operations to target</p>

      <Code block jsx>{ }</Code>

      <H>Get trap</H>

      <p>Get trap triggers when a property is read</p>

      <Code block jsx>{ }</Code>

      <Code block jsx>{ ,
               
            }
            
            dictionary = new Proxy(dictionary, {
              get(target, phrase) { 
                if (phrase in target) return target[phrase]
                return  
                }
              }
            )
        
            dictionary[ ] // Hola
            dictionary[ ] // no translation
       
            let numbers = []
            numbers = new Proxy(numbers, {
              set(target, prop, val) { // to intercept property writing
                if (typeof val !==  ) return false 
                target[prop] = val;
                return true
              }
            })

            numbers.push(1) // added successfully
            numbers.push(2) // added successfully
            numbers.push( ) // TypeError (  on proxy returned false)
            numbers // Proxy {0: 1, 1: 2}
       </p>

      <Code block jsx>{ ,
              age: 30,
              _password:  
            }

            user = new Proxy(user, {
              ownKeys(target) {
                return Object.keys(target).filter(key => !key.startsWith( ));
              }
            })

            for(let key in user) alert(key); // name, age
            Object.keys(user) // [ ]
            Object.values(user) // [ , 30]
       
            function delay(f, ms) {
              return new Proxy(f, {
                apply(target, thisArg, args) {
                  setTimeout(() => target.apply(thisArg, args), ms)
                }
              })
            }
            
            function sayHi(user) {
              alert(\ )
            }
            
            sayHi = delay(sayHi, 3000)
            sayHi.length // 1 // proxy forwards   operation to the target
            sayHi( ); // Hello, John! (after 3 seconds)
      