Shulou(Shulou.com)05/31 Report--

What are the knowledge points of this article "es6 decorators?" most people do not understand, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "es6 decorators have what" article.

There are two kinds of es6 decorators. Decorator can only be used for classes and class methods, so it can be divided into: 1, class decorator, used to decorate the entire class, syntax is "@ function name"; 2, class method decorator, used to decorate class methods, syntax is "@ function name method name".

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

There are several es6 decorators

There are two kinds of es6 decorators.

Decorator is a class-related syntax used to annotate or modify class-related methods and properties. Many object-oriented languages have this feature. Generally related to the class class, ordinary methods should not be used.

A decorator is a function written as a @ + function name. It can be placed before the definition of classes and class methods. The decorator is to execute the function, adding some control conditions to the class or the property methods below the class.

Decorators can only be used for classes and class methods, not for functions, because there is a function promotion.

1. Class decorator

Class decorator is used to decorate the entire class

Examples are as follows:

@ decorateClassclass Example {/ /...} function decorateClass (target) {target.isTestClass = true}

As in the code above, the decorator @ decorateClass modifies the behavior of the entire Example class, adding the static attribute isTestClass to the Example class. The decorator is a function, and the parameter target in the decorateClass function is the Example class itself, which is also equivalent to the constructor Example.prototype.constructor of the class.

2. Class method decorator

A method used by a class method decorator to decorate a class.

Examples are as follows:

Class Example {@ log instanceMethod () {} @ log static staticMethod () {}} function log (target, methodName, descriptor) {const oldValue = descriptor.value; descriptor.value = function () {console.log (`Calling ${name} with`, arguments); return oldValue.apply (this, arguments);}; return descriptor;}

As in the code above, the decorator @ log decorates the instance method instanceMethod and the static method staticMethod, respectively. The function of the @ log decorator is to execute console.log to output logs before performing the original operation.

The above is about the content of this article "what are the es6 decorators?" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to 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.