This is the sixth day of my participation in Gwen Challenge

This article has participated in the weekend study program, click to see more details

As we all know, the data-responsive functionality in Vue3 is implemented through ES6’s Proxy pattern — Proxy objects. Today we will take a brief look at what a Proxy object is.

The definition of the Proxy

Proxy objects are used to create a Proxy for an object to intercept and customize basic operations (such as property lookup, assignment, enumeration, function calls, and so on).

Proxy modifies the default form of the program, which is similar to making changes at the programming language level. It belongs to meta programming, that is, programming programming languages.

  • Metaprogramming refers to the writing of computer programs that either write or manipulate other programs (or themselves) as their data, or do at run time some work that should have been done at compile time.

Proxy can be understood as a layer of “interception” before the target object. All external access to the object must pass this layer of interception. Therefore, Proxy provides a mechanism for filtering and rewriting external access. The word Proxy is used to mean that it acts as a Proxy for certain operations.

Basic syntax for Proxy

ES6 natively provides a Proxy constructor to generate a Proxy instance.

var proxy = new Proxy(target, handler);
Copy the code
  • Target: To useProxyThe wrapped target object (which can be any type of object, including a native array, a function, or even another proxy).
  • Handler: An object that usually has functions as properties, and the functions in each property define the agents that perform the various operationsproxyBehavior.

Proxy Example

Here is a basic example of Proxy use:

const person = {
  name: "superMan"};const proxy = new Proxy(man, {
  get(target, property, receiver) {
    console.log('obtaining${property}Attribute `)
    returntarget[property]; }});console.log(proxy.name);
console.log(proxy.age);
Copy the code

In the example above, the Proxy constructor takes the Person object as the Proxy target and creates a Proxy object. When creating the proxy object, we define a GET catcher to capture the action of reading the proxy target properties. The function of the trap is to intercept the operations related to reading the properties of the target object by the user. Before these operations are propagated to the target object, the corresponding trap function will be called to intercept and modify the corresponding behavior.

After setting up the GET trap, the console prints the following when the above sample code is successfully run:

Obtaining the name attribute Superman is reading the age attributeundefined
Copy the code

By looking at the output above, we can see that the GET trap can intercept reads of both known and unknown properties.

The Proxy instance is used as the prototype object

Proxy instances can also be used as prototype objects for other objects:

var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35; }});let obj = Object.create(proxy);
obj.time  / / 35
Copy the code

In the above code, the proxy object is the prototype of the OBJ object. The OBJ object itself does not have the time attribute, so according to the prototype chain, the proxy object will read this attribute, resulting in interception.

Proxy instance method

When creating a Proxy object, in addition to defining a GET trap, we can define other traps, such as SET, apply, HAS, or deleteProperty.

get()

The get method intercepts a read of a property and can take three parameters, the target object, the property name, and the proxy instance itself (strictly speaking, the object against which the action is directed), the last of which is optional.

set()

The set method is used to intercept the assignment of an attribute. It can take four parameters: the target object, the attribute name, the attribute value, and the Proxy instance itself. The last parameter is optional.

apply()

The Apply method intercepts function calls, calls, and apply operations.

The Apply method takes three parameters: the target object, the target object’s context object (this), and the target object’s parameter array.

has()

The HAS method is used to intercept the HasProperty operation, which takes effect when determining whether an object has a property. A typical operation is the IN operator.

The HAS method can take two parameters, the target object and the name of the property to be queried.

deleteProperty()

The deleteProperty method intercepts the DELETE operation. If the method throws an error or returns false, the current property cannot be deleted by the delete command.

defineProperty()

The defineProperty method intercepts the Object.defineProperty operation.

conclusion

Proxy is the interception layer, you give the object to be intercepted, external access to this object must go through the interception layer, that is, access to the instance of Proxy object. The Proxy is used to filter and rewrite external access. For example, certain conditions must be met when assigning values.

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Everybody is good! I am the author of programming Samadhi, yi Wang, my public account is “programming Samadhi”, welcome to pay attention to, I hope you can give me more advice!

Knowledge and skills should be paid equal attention to, internal force and external power should be repaired simultaneously, theory and practice should grasp both hands, both hands should be hard!