Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to understand the es6 agent mode". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to understand the es6 agent mode" can help you solve your doubts.

The es6 proxy pattern is a design pattern, which means that a category can be used as an interface to something else, in the form of a new Proxy object in es6; a Proxy object is used to define the custom behavior of basic operations, and the syntax is "let p=new Proxy (target,handler);".

This tutorial operating environment: windows10 system, ECMAScript version 6. 0, Dell G3 computer.

What is the es6 proxy mode?

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

An agent is a class that can be used as an interface to something else. Agents can interface to anything: network connections, large objects in memory, files, or other expensive or unreplicable resources.

The concrete manifestation of the agent pattern in JavaScript is the new object in ES6-Proxy.

Proxy's explanation is:

The Proxy object is used to define custom behaviors for basic operations (such as property lookups, assignments, enumerations, function calls, etc.).

To put it simply: the Proxy object allows you to customize the basic operations of all legitimate objects in JavaScript. Then use your custom actions to override the basic operations of its objects. That is, when an object performs a basic operation, the process and results are customized by you, not by the object.

Sweat: well, it may be too complicated to express it in words. Let's just go to the code.

The syntax of Proxy is:

Let p = new Proxy (target, handler)

Target is the person you want to represent. It can be any legal object in JavaScript. Such as: (arrays, objects, functions, etc.)

Handler is a collection of operations you want to customize.

P is a new proxied object that has all the properties and methods of target. It's just that the behavior and results are customized in handler.

Then let's take a 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 obj.age console.log (obj.age); / / 4p.name ='Li Bai'; console.log (p.name) / / Li Bai p.age = 4scape console.log (p.age); / / I am a result of customization

From the above code, I can clearly see the role of the Proxy object. That is, the custom behavior previously received to define the basic operation. The same get and set operations. The result of no unproxied object is calculated by its JavaScript execution mechanism. The result of the proxied object is customized by us.

The compatibility of Proxy is as follows:

After reading this, the article "how to understand the es6 Agent Mode" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.