Reading Notes: in-depth understanding ES6 (XII)

Chapter XII proxy (Proxy) and reflection (Reflection) API

  ES6 added some built-in objects, giving developers the ability to access more JavaScript engine. Proxy (Proxy) is a wrapper can intercept and change the underlying JavaScript engine operation in the new language, the object through the inner workings of it exposed.

 

Section 1 array problem

  Before ES6 appeared, developers can not be the object of imitation JavaScript array of objects defined by their own behavior. But now through a proxy on it.

 

Section 2 and reflecting agents

  1. Call the new Proxy () can create a proxy. Agents can intercept the underlying JavaScript engine inside the target object manipulation, these underlying operating after being intercepted triggers the trap function in response to specific actions.

  2. Reflect reflected in the form of objects, each corresponding to a trap agent named parameters are the same and a method Reflect.

 

Section 3 Create a simple agent

  Creating an agent need to pass two parameters Proxy constructor: Target (target) and handlers (handler). Do not use any trap handler is equivalent to a simple forwarding agent. E.g:

 1 let target = {};
 2 let proxy = new Proxy(target, {});
 3 
 4 proxy.name = "proxy";
 5 console.log(proxy.name); // "proxy"
 6 console.log(target.name); // "proxy"
 7 
 8 target.name = "target";
 9 console.log(proxy.name); //"target"
10 console.log(target.name); //"target"

 

Section 4 Use Set traps verification property

  In this section, by using the set to implement an example of a trap when the object attribute value to be added to a digital value verified. as follows:

. 1 the let target = {
 2      name: "target"
 . 3  }
 . 4  
. 5 the let Proxy = new new the Proxy (target, {
 . 6      SET (trapTarget, Key, value, Receiver) {
 . 7  
. 8          // Ignore undesirable properties have received affected 
. 9          IF (! trapTarget.hasOwnProperty (Key))
 10          {
 . 11              IF (isNaN (value))
 12 is              {
 13 is                  the throw  new new TypeError ( "attribute must be a number" );
 14              }
 15          }
 16  
. 17          // Add property
18 is          return Reflect.set (trapTarget, Key, value, Receiver);
 . 19      }
 20 is  });
 21 is  
22 is  // add a new attribute 
23 is proxy.count =. 1 ;
 24 the console.log (proxy.count); // . 1 
25 the console.log (target.count); // . 1 
26 is  
27  // Since the target has a name attribute, can be assigned the value 
28 proxy.name = "Proxy" ;
 29 the console.log (proxy.name); // " Proxy " 
30 console.log (target.name); // " Proxy " 
31  
32  // to absent property assignment will throw an error
33 proxy.anotherName = "proxy";

 

Section 5 get trap verification object structure (Object shape)

  Object structure is the set of object properties and methods are available. Get the trap used in this section to verify the absence of an example of a property on an object.

  For more code, see P.275

 

Section 6 Using the trap has been hidden attribute

  Whenever you use in operator will call has traps.

  For more code, see P.276

 

Section 7 deleted prevent property with deleteProperty trap

  Whenever delete object properties by the delete operator, deleteProperty traps will be called. If you want to protect property from being deleted, and in strict mode does not throw an error, then this method is useful.

  For more code, see P.278

 

Section 8 prototype agent trap

  1. Since Reflect.getPropertyOf () method and Reflect.setPropertyOf () method with the same name, there are some important differences in the method of the object, so the difference is important to use them.

  2. Object.getPropertyOf () method and Object.setPropertyOf () is an advanced operation, is beginning to create a developer used; and Reflect.getPropertyOf () and Reflect.setPropertyOf () method is the underlying OS, which gives developers before you can access only the internal operation of the [[GetPropertyOf]] and [[SetPropertyOf]] permission.

 

Section 9 objects scalability trap

  1. ES6 can intercept these two methods by proxy in preventExtensions and isExtensible traps and calls the underlying object.

  2. In contrast, the advanced features of the method, the underlying has stricter error checking.

 

Section 10 Attribute Descriptor Trap

  In the proxy can be used separately defineProperty getOwnPropertyDescriptor traps and trap interception Object.defineProperty () method call and Object.getOwnPropertyDescriptor () method.

 

Section 11 ownKeys trap

  1. ownKeys trap by Reflect.ownKeys () method implements the default behavior, the returned array contains all of the key attributes of its own name, string type and Symbol types are included.

  2. ownKeys trap can also affect the for-in loop, when determining the key internal recycling of calls trap.

 

Section 12 of the proxy function and apply trap construt

  1. All agents trap, only the agent and objectives apply construct is a function.

  2. When you need to use the "validation function parameters", "Do not call the new constructor", "override abstract base class constructor", "callable class constructor", we can look back to this section.

 

Section 13 may revoke a proxy

  1. Whether it is for security purposes by providing an object API, or cut off access at any point in time, you will find that revocation of proxy is very useful.

  2. Can () method creates a revocable proxy by Proxy.revocable.

  REVOKE 3. When the call () function, the Proxy can not perform further operations. Any attempt to interact with the proxy object will trigger a trap proxy throws an error.

 

Section 14 to address an array of issues

  ES6 in the past, developers can not fully mimic the behavior of arrays in JavaScript, the ES6 proxy and the reflection API can be used to create an object, the object's behavior with added built-in array and the same type of behavior when deleting attributes.

  When you need to use a proxy and classes to simulate the behavior of the array, you can return to this section of view.

 

Section 15 will be used as a prototype agent

  Although the agents when used as a prototype and limited, but there are still a few pitfalls can be used. E.g:

    1. get a trap on the prototype

    2. Use the set trap

    3. Use has trap

    4 can also be reduced as the proxy class

  Encountered several situations mentioned above, we can look back to see the contents of this section.

 

Guess you like

Origin www.cnblogs.com/zxxsteven/p/11519757.html