What is the agency model

Proxy Pattern (English: Proxy Pattern) is a design Pattern in programming.

A proxy is a class that can act as an interface to something else. Agents can interface to just about anything: network connections, large objects in memory, files, or other resources that are expensive or impossible to copy.

A well-known example of proxy mode is pointer objects with reference counting.

When multiple copies of a complex object need to exist, the proxy mode can be combined with the share meta mode to reduce memory usage. A typical approach is to create a complex object and multiple proxies, each referring to the original complex object. Operations performed on the agent are forwarded to the original object. Once all the agents are gone, complex objects are removed.

Above is an overall definition of the proxy pattern in Wikipedia. The Proxy mode in JavaScript is represented by a new object in ES6 called Proxy

What is a Proxy object

In MDN, the interpretation of Proxy is:

Proxy objects are used to define custom behavior for basic operations (such as property lookup, assignment, enumeration, function call, etc.).

Simply put :Proxy objects allow you to customize the basic operations of all legitimate objects in JavaScript. Then override the basic operations of its object with your own custom operations. That is, when an object performs a basic operation, the process and results of the execution are your own, not the object’s.

😓 Well, that might be too complicated for words. Let’s just go straight to the code.

First, Proxy syntax is:

let p = new Proxy(target, handler);
Copy the code

Among them:

• Target is the object you want to proxy. It can be any legal object in JavaScript. (Array, object, function, etc.)

• Handler is a collection of methods that you want to customize.

• P is a new proxied object that has all the properties and methods of target. But its behavior and results are customized in the 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'm a result of custom';
    } else {
      return target[key];
    }
  },

  set(target, key, value) {
    if (value === 4) {
      target[key] = 'I'm a result of custom';
    } else{ target[key] = value; }}})console.log(obj.a) / / 1
console.log(obj.c) // undefined
console.log(p.a) / / 1
console.log(p.c) // I am a result of custom

obj.name = '李白';
console.log(obj.name); / / li bai
obj.age = 4;
console.log(obj.age); / / 4

p.name = '李白';
console.log(p.name); / / li bai
p.age = 4;
console.log(p.age); // I am a result of custom
Copy the code

From the code above, I can clearly see what the Proxy object does. That is, the custom behavior used to define the basic operations that we received before. Same get and set operations. The result of an object without a proxy is a computation run by the execution mechanism of its JavaScript itself. The result of the proxied object is our own.

Proxy can represent the scope –handler

In the above code, we see that the second argument, handler, is passed when we construct a proxy object. This handler object is made up of the two function methods get and set. These two methods are called when an object is get and set, instead of performing operations on the native object. So why do we proxy get and set operations on objects after we define the handler names get and set?

In fact, handler itself is a new object designed in ES6. What it does is use various proxy-able operations from defining proxy objects. It itself has a total of 13 methods, each of which can proxy an operation. The 13 methods are as follows:

handler.getPrototypeOf()

// This operation is triggered when the prototype of the proxy Object is read, such as when executing object.getPrototypeof (proxy).

handler.setPrototypeOf()

// This action is triggered when the prototype of the proxy Object is set, such as when object.setPrototypeof (proxy, null) is executed.

handler.isExtensible()

// triggers this operation when determining whether a proxy Object isExtensible, such as when performing object.isextensible (proxy).

handler.preventExtensions()

// Trigger this action when making a proxy Object non-extensible, such as when executing object.preventExtensions (proxy).

handler.getOwnPropertyDescriptor()

/ / in acquiring a proxy Object a property description is triggered when the operation, such as the execution Object. GetOwnPropertyDescriptor (proxy, "foo").

handler.defineProperty()

// This action is triggered when a property description is defined for a property of the proxy Object, such as when executing object.defineProperty (proxy, "foo", {}).

handler.has()

// This action is triggered when determining whether the proxy object has a property, such as when "foo" in proxy is executed.

handler.get()

// This action is triggered when a property of the proxy object is read, such as when proxy.foo is executed.

handler.set()

// This action is triggered when a property of the proxy object is assigned, such as when proxy.foo = 1 is executed.

handler.deleteProperty()

// This action is triggered when a property of the proxy object is deleted, such as when delete proxy.foo is executed.

handler.ownKeys()

/ / get all the properties of a proxy Object in key is triggered when the operation, such as the execution Object. GetOwnPropertyNames (proxy).

handler.apply()

// This action is triggered when a proxy object whose target object is a function is called, such as when proxy() is executed.

handler.construct()

// This operation is triggered when an instance of a proxy object whose target object is the constructor is constructed, such as when new Proxy () is executed.
Copy the code

The role of the Proxy

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

Intercept and monitor external access to objects

Reduce the complexity of a function or class

2. Verify operations or manage required resources before complex operations

For the specific performance of these three usage aspects, you can refer to this article – instance resolution ES6 Proxy usage scenarios

Proxy compatibility

Above is my some superficial summary, hope to be helpful to you. If there are any irregularities in the article, please correct them. Thank you.

References:

• MDN—Proxy

• ES6 Proxy Usage scenario

My personal website is wangyiming.info