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

This article will explain in detail the analysis of the principle of Javascript decorator for you. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

A descriptive word that begins with @. The English verb decorator is decorate, which means to decorate. The root dek (dec pronunciation) means "accept" in the original Indo-European family. That is, something original accepts something new (and gets better).

From another point of view, the decorator mainly works on the outside of the decorated object, rather than invading what happens inside it. Decorator mode is also a kind of development mode, although its position is weaker than MVC, IoC and so on, but it is an excellent mode.

JavaScript's decorator may be borrowed from Python or Java. The obvious difference is that the decorator for most languages must be separated line by line, while the decorator for js can be on one line.

The significance of the existence of decorators

For example: I enter the company headquarters building with my employee card. Because each employee belongs to a different department and level, they are not allowed to enter any room in the building. Every room has a door; then the company needs to arrange for at least one person in each office to verify the visitor's work:

Register visitors first

Verify that you have permission to enter, and if not, ask it to leave.

Record the time of departure.

Another option is to install an electronic door lock, which simply transmits the information of the employee card to the computer room, which is verified by a specific program.

The former is called stupid mode for the time being, and the code is as follows:

Function A101 (who) {record (who,new Date (), 'enter'); if (! permission (who)) {record (who,new Date (),' no permission') return void;} / / continue to execute doSomeWork (); record (who,new Date (), 'leave')} function A102 (who) {record (who,new Date (),' enter') If (! permission (who)) {record (who,new Date (),'no permission') return void;} / / continue to execute doSomeWork (); record (who,new Date (), 'leave')} / /.

Experienced people must have thought of encapsulating those repetitive statements into a method and calling them uniformly. Yes, it can solve most of the problems, but it's not elegant enough. At the same time, there is another problem. If there are so many "rooms", or if there are only odd-numbered rooms in the building to verify that even numbers are not verified, wouldn't it be very "abnormal"? If you use decorator mode to do this, the code looks like this:

@ verify (who) class Building {@ verify (who) A101 () {/ * * /} @ verify (who) A102 () {/ *... * /} / /.}

Verify is the decorator of validation, and it is essentially a set of functions.

JavaScript decorator

As in the previous example, the decorator is itself a function that is executed before the decorated object is executed.

In JavaScript, the types of decorators are:

Class

Access methods (get and set of properties)

Field

Method

Parameters.

Since the concept of decorator is still in the proposal stage and is not an officially available js feature, in order to use this feature, you have to rely on translator tools, such as Babel tools or TypeScript compiled JS code, before it can be executed. We need to set up the running environment and configure some parameters first. (the following procedure assumes that the NodeJS development environment and package management tools have been correctly installed)

Cd project & & npm initnpm i-D @ babel/cli @ babel/core @ babel/plugin-proposal-class-properties @ babel/plugin-proposal-decorators @ babel/preset-env babel-plugin-parameter-decorator

Create a .babelrc configuration file as follows:

{"presets": ["@ babel/preset-env"], "plugins": [["@ babel/plugin-proposal-decorators", {"legacy": true}], ["@ babel/plugin-proposal-class-properties", {"loose": true}], "babel-plugin-parameter-decorator"]}

Using the following conversion command, we can get the conversion program for ES5:

Npx babel source.js-out-file target.js class decorator

Create a JS program decorate-class.js that uses the decorator

@ classDecoratorclass Building {constructor () {this.name = "company";}} const building = new Building (); function classDecorator (target) {console.log ("target", target);}

The above is the simplest decorator program, we use babel to "translate" it into ES5 program, and then beautify it to get the following program.

"use strict"; var _ class;function _ classCallCheck (instance, Constructor) {if (! (instance instanceof Constructor)) {throw new TypeError ("Cannot call a class as a function");}} var Building = classDecorator ((_ class = function Building () {_ classCallCheck (this, Building); this.name = "company";}) | _ class;var building = new Building (); function classDecorator (target) {console.log ("target", target);}

Line 12 invokes the decorator of the function form and feeds the constructor (the class itself) into it during class generation. It also reveals the origin that the first parameter of the decorator is the constructor of the class.

Method (method) decorator

Change the code a little bit and keep it as simple as possible:

Class Building {constructor () {this.name = "company";} @ methodDecorator openDoor () {console.log ("The door being open");}} const building = new Building (); function methodDecorator (target, property, descriptor) {console.log ("target", target); if (property) {console.log ("property", property);} if (descriptor) {console.log ("descriptor", descriptor) } console.log ("= end of decorator=");}

Then convert the code, and you can see that the amount of code has suddenly increased a lot this time. Exclude the _ classCallCheck, _ defineProperties, and _ createClass functions, and focus on the _ applyDecoratedDescriptor function:

Function _ applyDecoratedDescriptor (target, property, decorators, descriptor, context) {var desc = {}; Object.keys (descriptor) .forEach (function (key) {desc [key] = descriptor [key];}); desc.enumerable =! desc.enumerable; desc.configurable =! desc.configurable; if ("value" in desc | | desc.initializer) {desc.writable = true } desc = decorators .slice () .reverse () .reduce (function (desc, decorator) {return decorator (target, property, desc) | | desc;}, desc); if (context & & desc.initializer! = = void 0) {desc.value = desc.initializer? Desc.initializer.call (context): void 0; desc.initializer = undefined;} if (desc.initializer = void 0) {Object.defineProperty (target, property, desc); desc = null;} return desc;}

After it generates the constructor, it executes the function, noting that the decorator function is passed as an array of arguments. Then go to line 17: 22 of the above code and apply the decorator one by one, where the call to the decorator is on line 21.

It sends three parameters, and target refers to the class itself. Property refers to the method name (or property name), desc is the descriptor that may have been processed by the previous decorator, and if this is the first loop or there is only one decorator, it is the descriptor of the method or property itself.

Accessor (accessor) decoration

In JS's definition of a class, the get and set keywords are supported to set the read and write operation logic of a field, and the decorator also supports the operation of such methods.

Class Building {constructor () {this.name = "company";} @ propertyDecorator get roomNumber () {return this._roomNumber;} _ roomNumber = ""; openDoor () {console.log ("The door being open");}}

Interested readers may have found that the accessor decoration code is very close to the method decoration code above. With regard to attribute get and set methods, they are also a special form of a method. So the code between them is very close.

Attribute decorator

Continue to modify the source code:

Class Building {constructor () {this.name = "company";} @ propertyDecorator roomNumber = ";} const building = new Building (); function propertyDecorator (target, property, descriptor) {console.log (" target ", target); if (property) {console.log (" property ", property);} if (descriptor) {console.log (" descriptor ", descriptor);} console.log (" = end of decorator= ");}

The converted code is still very close to the code of the above attributes and accessors. But in addition to _ applyDecoratedDescriptor, there is also a _ initializerDefineProperty function. This function binds various declared fields to the object when it generates the constructor.

Parameter decorator

The position of the parameter decorator is slightly different from that of the previous centralized decorator, and it is used within the line.

Class Building {constructor () {this.name = "company";} openDoor (@ parameterDecorator num, @ parameterDecorator zoz) {console.log (`${num} door being Open`);}} const building = new Building (); function parameterDecorator (target, property, key) {console.log ("target", target); if (property) {console.log ("property", property);} if (key) {console.log ("key", key) } console.log ("= end of decorator=");}

The difference between the converted code is obvious. Babel does not generate a specific function to operate on it, but only calls the decorator function written by the developer directly after creating the class (constructor) and related properties and methods:

Var Building = / * # _ PURE__*/function () {function Building () {_ classCallCheck (this, Building); this.name = "company";} _ createClass (Building, [{key: "openDoor", value: function openDoor (num, zoz) {console.log (".concat (num," door being open ");}}]); parameterDecorator (Building.prototype," openDoor ", 1) ParameterDecorator (Building.prototype, "openDoor", 0); return Building;} (); decorator application usage parameter-closure

In all of the above cases, the decorator itself does not use any parameters. However, in practical applications, there is often a need for specific parameters. Let's go back to the example at the beginning of verify (who), where you need to pass in an identity variable. How to do that? Let's change the code of the class decorator slightly:

Const who = "Django"; @ classDecorator (who) class Building {constructor () {this.name = "company";}}

Get after conversion

/ /... var who = "Django"; var Building = ((_ dec = classDecorator (who)), _ dec ((_ class = function Building () {_ classCallCheck (this, Building); this.name = "company";})) | | _ class); / /.

Notice line 4, line 5, which executes the decorator and then feeds the class (constructor) in with the return value. Accordingly, we should write the constructor like this:

Function classDecorator (people) {console.log (`hi~ ${people} `); return function (target) {console.log ("target", target);};}

The same is true of methods, accessors, properties, and parameter decorators.

Decorator wrapping method

At this point, we can combine the decorator parameters with the target object to perform some logical class operations. So let's go back to the example at the beginning of the article: the requirement is to verify the visitor's permissions, then record it, and finally record it again when the visitor leaves. At this point, you need to supervise the entire process in which the object method is called.

Please pay attention to the descriptor of the method decorator, which we can use to "override" this method.

Class Building {constructor () {this.name = "company";} @ methodDecorator ("Gate") openDoor (firstName, lastName) {return `The door will be open, when ${firstName} ${lastName} is walking into the ${this.name}. `;}} let building = new Building (); console.log (building.openDoor ("django", "xiang")); function methodDecorator (door) {return function (target, property, descriptor) {let fn = descriptor.value Descriptor.value = function (... args) {let [firstName,lastName] = args; console.log (`log: ${firstName}, who are comming.`); / / verify (firstName,lastName) let result = Reflect.apply (fn, this, [firstName,lastName]); console.log (`log: ${result} `); console.log (`log: ${firstName}, who are arranging.`); return result;} Return descriptor;};}

Line 17 of the code temporarily stores the original method; line 18 defines a new method, line 20: 25, recording, validating, and recording the action of leaving.

Log: Django, who are comming.log: The door will be open, when Django Xiang is walking in to the company.log: Django, who are leaving.The door will be open, when Django Xiang is walking in to the company Decoration order

By reading the converted code, we know that the moment the decorator works is to complete the action of the decoration function in the generation before the class is instantiated. So, what is the process if multiple decorators of different types work at the same time? Let's put all the previous cases together and take a look:

Const who = "Django"; @ classDecorator (who) class Building {constructor () {this.name = "company";} @ propertyDecorator roomNumber = ""; @ methodDecorator openDoor (@ parameterDecorator num) {console.log (`${num} door being open`);} @ accessorDecorator get roomNumber () {return this._roomNumber;}} const building = new Building (); function classDecorator (people) {console.log (`class decorator`) Return function (target) {console.log ("target", target);} function methodDecorator (target, property, descriptor) {console.log ("method decorator");} function accessorDecorator (target, property, descriptor) {console.log ("accessor decorator");} function propertyDecorator (target, property, descriptor) {console.log ("property decoator");} function parameterDecorator (target, property, key) {console.log ("parameter decorator");}

Class decorator

Parameter decorator

Property decoator

Method decorator

Accessor decorator

You can also get the execution order by reading the converted source code:

Class decorator (in the outermost layer)

Parameter decorator (at the innermost level of the generation constructor)

In the order in which they appear: properties, methods, and accessors

This is the end of this article on "Analysis of the principle of Javascript decorator". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

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.