Explanation of the Proxy mode in ES6-proxy, explanation of es6 Proxy proxy

Explanation of the Proxy mode in ES6-proxy, explanation of es6 Proxy proxy
What is proxy mode?

Proxy Pattern is a design Pattern in programming.

A proxy is an interface that a category can act as other things. Proxies can act as interfaces for anything: network connections, large objects in memory, files, or other expensive or unreproducible resources.

The famous example of proxy mode is the reference count pointer object.

When multiple copies of a complex object must exist, the proxy mode can be combined with the metadata mode to reduce memory usage. A typical practice is to create a complex object and multiple proxies. Each proxy will reference the original complex object. The operation of the agent will be transferred to the original object. Complex objects are removed once all proxies do not exist.

The above is an overall definition of Proxy mode in Wikipedia. The specific manifestation of Proxy mode in JavaScript is the newly added object in ES6 --- Proxy

What is a Proxy object?

On MDN, the Proxy is explained as follows:

The Proxy object is used to define the custom behavior of basic operations (such as attribute search, assignment, enumeration, and function call ).

Simply put, the Proxy object allows you to customize the basic operations of all valid objects in JavaScript. then, use your custom operations to overwrite the basic operations of the object. that is, when an object executes a basic operation, the execution process and result are customized, not the object.

: Sweat: Well, it may be too complicated to express it in text. Let's go directly to the code.

First, the Proxy syntax is:

let p = new Proxy(target, handler);

Where:

1. Target is the object you want to proxy. It can be any legal object in JavaScript, such as: (array, object, function, etc)
2. Handler is a set of custom operation methods.
3. P is a new object after proxy. It has all attributes and methods of the target, but its behavior and results are customized in handler.

Then let's look at this Code:

Let obj = {a: 1, B: 2,} const p = new Proxy (obj, {get (target, key, value) {if (key = 'C') {return 'I am a custom result';} else {return target [key] ;}}, set (target, key, value) {if (value = 4) {target [key] = 'I am a custom result ';} else {target [key] = value ;}}) console. log (obj. a) // 1console. log (obj. c) // undefinedconsole. log (p. a) // 1console. log (p. c) // I am a custom result obj. name = 'Li Bai '; console. log (obj. name); // Li Bai obj. age = 4; console. log (obj. age); // 4 p. name = 'Li Bai '; console. log (p. name); // Li Bai p. age = 4; console. log (p. age); // I am a custom result

From the above code, I can clearly see the role of the Proxy object. this is the previously defined behavior used to define basic operations. the same get and set operations. the result of an object without proxy is obtained after its JavaScript execution mechanism runs the computation. the result of the proxy object is customized.

The Proxy's Proxy range -- handler

In the code above, we can see the second parameter handler passed when constructing a proxy object. This handler object is composed of get and set function methods. these two methods will be called and executed when an object is get and set to replace the operations on the native object. so why is the get and set operations on the proxy object after the get and set functions are defined in handler?

In fact, handler itself is a newly designed object of es6. it is used to customize various proxy operations of proxy objects. It has a total of 13 methods, each of which can represent an operation. The 13 methods are as follows:

Handler. getPrototypeOf () // this operation is triggered when the prototype of the proxy Object is read, for example, when Object. getPrototypeOf (proxy) is executed. Handler. setPrototypeOf () // this operation is triggered when the prototype of the proxy Object is set, for example, when Object. setPrototypeOf (proxy, null) is executed. Handler. isExtensible () // triggers this operation when determining whether a proxy Object is extensible, for example, when executing Object. isExtensible (proxy. Handler. preventExtensions () // this operation is triggered when a proxy Object cannot be extended, for example, when the Object. preventExtensions (proxy) is executed. Handler. getOwnPropertyDescriptor () // this operation is triggered when an attribute description of a proxy Object is obtained, for example, when Object. getOwnPropertyDescriptor (proxy, "foo") is executed. Handler. defineProperty () // triggers this operation when defining the attribute description of a proxy Object attribute, for example, when executing Object. defineProperty (proxy, "foo. Handler. has () // triggers this operation when determining whether the proxy object has an attribute, for example, when performing "foo" in proxy. Handler. get () // this operation is triggered when a property of the proxy object is read, for example, when proxy. foo is executed. Handler. set () // this operation is triggered when an attribute of the proxy object is assigned a value, for example, when proxy. foo = 1 is executed. Handler. deleteProperty () // this operation is triggered when an attribute of the proxy object is deleted, for example, when delete proxy. foo is executed. Handler. ownKeys () // this operation is triggered when all attribute keys of the proxy Object are obtained, for example, when Object. getOwnPropertyNames (proxy) is executed. Handler. apply () // this operation is triggered when a proxy object whose target object is a function is called, for example, when proxy () is executed. Handler. construct () // this operation is triggered when an instance is constructed for a proxy object whose target object is the constructor, for example, when new proxy () is executed.

Role of Proxy

The role of Proxy mode Proxy is mainly reflected in three aspects:

1. Intercept and monitor external access to objects

2. Reduce the complexity of functions or classes

2. Verify operations or manage required resources before complex operations

For the specific performance of these three aspects, you can refer to this article-Use Cases of instance resolution ES6 Proxy

Proxy compatibility

References:

MDN --- Proxy

Use Cases of instance parsing ES6 Proxy

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.