JS Decorator Pattern and TypeScript Decorators

Introduction to the Decorator Pattern

The Decorator Pattern, also known as the Decorator Pattern, dynamically adds additional responsibilities without changing the object itself. It is a kind of structural pattern.

Advantages of using the decorator pattern: separating the core responsibilities of the object from the functions to be decorated. Non-invasive behavior modification.

For example, a girl with average looks can also have stunning looks with the help of the beauty function. As long as you are good at using the auxiliary decorative functions, turn on face slimming, enlarge the eyes, do some skin smoothing, and take a photo, you will look amazing.

After this series of superimposed decorations, you are still you, your appearance remains the same, but you can gain more beauty in front of the camera. If you like, you can also try different decoration styles. As long as the decoration function is done well, you can become a "Mr. Variety Star".

It can be expressed in code, abstracting each function into a class:

// Girl class Girl {
  faceValue() {
    console.log('My original face')
  }
}

class ThinFace {
  constructor(girl) {
    this.girl = girl;
  }
  faceValue() {
    this.girl.faceValue();
    console.log('Turn on face slimming')
  }
}

class IncreasingEyes {
  constructor(girl) {
    this.girl = girl;
  }
  faceValue() {
    this.girl.faceValue();
    console.log('Enlarge your eyes')
  }
}

let girl = new Girl();
girl = new ThinFace(girl);
girl = new IncreasingEyes(girl);

// Blind your eyes girl.faceValue(); //

Judging from the performance of the code, embedding one object into another object is equivalent to wrapping one object with another object to form a wrapping chain. After the call, it is passed to each object along the packaging chain, giving each object a chance to process.

This method has great flexibility in adding and deleting decorative functions. If you have the courage to show your real face, just remove the face-slimming packaging. This will have no effect on other functions. If you want to add skin smoothing, add another function class and continue to decorate it. This will not affect other functions and they can run at the same time.

Adding small functions to JavaScript using classes is a bit cumbersome. The advantage of JavaScript is that it is flexible and can be represented using objects:

let girl = {
  faceValue() {
    console.log('My original face')
  }
}
function thinFace() {
  console.log('Turn on face slimming')
}
function IncreasingEyes() {
  console.log('Enlarge your eyes')
}

girl.faceValue = function(){
  const originalFaveValue = girl.faceValue; // original function return function() {
    originalFaveValue.call(girl);
    thinFace.call(girl);
  }
}()
girl.faceValue = function(){
  const originalFaveValue = girl.faceValue; // original function return function() {
    originalFaveValue.call(girl);
    IncreasingEyes.call(girl);
  }
}()

girl.faceValue();

Without changing the original code, the original function is retained first, then rewritten and the retained function is called in the rewritten code.

Use a picture to illustrate the principle of the decorator pattern:

As can be seen from the figure, the functionality of the original object is increased through layer-by-layer packaging.

Decorators in TypeScript

The decorator in TypeScript uses the form of @expression. After expression is evaluated, it is a function that is called at runtime, and the decorated declaration information is passed in as a parameter.

The decorators in the Javascript specification are currently in the second stage of solicitation, which means that they cannot be used directly in native code and are not yet supported by browsers.

The decorator syntax can be converted into browser executable code during the compilation phase using babel or TypeScript tools. (There will be compiled source code analysis at the end)

The following mainly discusses the use of decorators in TypeScript.

Decorators in TypeScript can be attached to class declarations, methods, accessors (getters/setters), properties, and parameters.

To enable support for decorators, compile the file on the command line:

tsc --target ES5 --experimentalDecorators test.ts

Configuration file tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

Use of decorators

A decorator is actually a function. When using it, add the @ symbol in front of it and write it before the declaration to be decorated. When multiple decorators act on the same declaration at the same time, you can write them in one line or on a new line:

//Write @test1 on a new line
@test2
declaration

//Write a line @test1 @test2 ...
declaration

Define the face.ts file:

function thinFace() {
  console.log('Turn on face slimming')
}

@thinFace
class Girl {
}

Compile into js code, and call the thinFace function directly at runtime. This decorator acts on a class and is called a class decorator.

If you need to add multiple functions, you can combine multiple decorators together:

function thinFace() {
  console.log('Turn on face slimming')
}
function IncreasingEyes() {
  console.log('Enlarge your eyes')
}

@thinFace
@IncreasingEyes
class Girl {
}

When multiple decorators are combined together at runtime, please note that the calling order is from bottom to top, which is exactly the opposite of the writing order. The running results given in the example are:

'Enlarge your eyes'

'Turn on face slimming'

If you want to add attributes to a class in a decorator and use them in other decorators, you should write it in the last decorator, because the last decorator is called first.

Decorator Factory

Sometimes you need to pass some parameters to the decorator, which requires the help of the decorator factory function. The decorator factory function is actually a high-order function that returns a function after being called, and the returned function serves as the decorator function.

function thinFace(value: string){
  console.log('1-Face-thinning factory method')
  return function(){
    console.log(`4-I am a face-slimming decorator, I want to slim my face ${value}`)
  }
}
function IncreasingEyes(value: string) {
  console.log('2-Enlarge the eyes factory method')
  return function(){
    console.log(`3-I am a decorator that enlarges the eyes, and I need ${value}`)
  }
}

@thinFace('50%')
@IncreasingEyes('Double')
class Girl {
}

The factory function is called after the @ symbol, and is executed from top to bottom in order to obtain the decorator function. The execution order of the decorator functions is still from bottom to top.

The result of running is:

1-Face Slimming Factory Method

2-Enlarge Eyes Factory Method

3-I am a decorator that enlarges the eyes. I want to double the size.

4-I am a face-slimming decorator, I want to slim my face by 50%

To summarize:

• Write the factory function and execute it from top to bottom to get the decorator function.
• The execution order of decorator functions is from bottom to top.

Class Decorators

Decorators acting on class declarations give us the opportunity to change the class. When the decorator function is executed, the class constructor is passed to the decorator function.

function classDecorator(value: string){
  return function(constructor){
    console.log('Receive a constructor')
  }
}

function thinFace(constructor){
  constructor.prototype.thinFaceFeature = function() {
    console.log('Face thinning function')
  }
}

@thinFace
@classDecorator('class decorator')
class Girl {}

let g = new Girl();

g.thinFaceFeature(); // 'Thin face feature'

In the above example, after getting the transfer constructor, you can add new methods to the constructor prototype and even inherit other classes.

Method Decorators

There are two types of methods that act on a class: static methods and prototype methods. When acting on a static method, the decorator function receives the class constructor; when acting on a prototype method, the decorator function receives the prototype object.
Here is an example of applying it to the prototype method.

function methodDecorator(value: string, Girl){
  return function(prototype, key, descriptor){
    console.log('Receive prototype object, decorated property name, property descriptor', Girl.prototype === prototype)
  }
}

function thinFace(prototype, key, descriptor){
  // Keep the original method logic let originalMethod = descriptor.value;
  // Rewrite, add logic, and execute the original logic descriptor.value = function(){
    originalMethod.call(this); // Note that this is pointed to console.log('Turn on face-slimming mode')
  }
}

class Girl {

  @thinFace
  @methodDecorator('method decorator', Girl)
  faceValue(){
    console.log('My original appearance')
  }
}

let g = new Girl();

g.faceValue();

As can be seen from the code, the decorator function receives three parameters: prototype object, method name, and description object. If you are unfamiliar with the object being described, you can refer to this;

To enhance the functionality, you can keep the original function and rewrite the value of the description object into another function.

When using the g.faceValue() access method, the value corresponding to the description object value is accessed.

Add logic to the rewritten function and execute the original function that was retained. Note that the original function must use call or apply to point this to the prototype object.

Property Decorators

It acts on the attributes defined in the class. These attributes are not attributes on the prototype, but attributes on the instance object obtained by instantiating the class.

The decorator also accepts two parameters, the prototype object, and the attribute name. But there are no attributes describing objects, why? This has to do with how TypeScript initializes property decorators. There is currently no way to describe an instance attribute when defining a member of a prototype object.

function propertyDecorator(value: string, Girl){
  return function(prototype, key){
    console.log('Receive prototype object, decorated property name, property descriptor', Girl.prototype === prototype)
  }
}

function thinFace(prototype, key){
  console.log(prototype, key)
}

class Girl {
  @thinFace
  @propertyDecorator('property decorator', Girl)
  public age: number = 18;
}

let g = new Girl();

console.log(g.age); // 18

Other ways to write decorators

The following is a combination of multiple decorators, in addition to the three mentioned above, there are also accessor decorators and parameter decorators. When these decorators are put together, there is an execution order.

function classDecorator(value: string){
  console.log(value)
  return function(){}
}
function propertyDecorator(value: string) {
  console.log(value)
  return function(){
    console.log('propertyDecorator')
  }
}
function methodDecorator(value: string) {
  console.log(value)
  return function(){
    console.log('methodDecorator')
  }
}
function paramDecorator(value: string) {
  console.log(value)
  return function(){
    console.log('paramDecorator')
  }
}
function AccessDecorator(value: string) {
  console.log(value)
  return function(){
    console.log('AccessDecorator')
  }
}
function thinFace(){
  console.log('thin face')
}
function IncreasingEyes() {
  console.log('Enlarge your eyes')
}


@thinFace
@classDecorator('class decorator')
class Girl {
  @propertyDecorator('property decorator')
  age: number = 18;
  
  @AccessDecorator('Access Decorator')
  get city(){}

  @methodDecorator('method decorator')
  @IncreasingEyes
  faceValue(){
    console.log('original face')
  }

  getAge(@paramDecorator('parameter decorator') name: string){}
}

After running this compiled code, you will find that the order of these accessors is property decorator -> accessor decorator -> method decorator -> parameter decorator -> class decorator.

For more detailed usage, please refer to the official website documentation: https://www.tslang.cn/docs/handbook/decorators.html#decorator-factories

Decorator runtime code analysis

Decorators are not supported in browsers and cannot be used directly. They need to be compiled into executable code for browsers using tools.

Analyze the code compiled by the tool.

Generate face.js file:

tsc --target ES5 --experimentalDecorators face.ts

Open the face.js file and you will see a compressed code that you can format.

Let’s look at this code first:

__decorate([
    propertyDecorator('property decorator')
], Girl.prototype, "age", void 0);
__decorate([
    AccessDecorator('Access Decorator')
], Girl.prototype, "city", null);
__decorate([
    methodDecorator('method decorator'),
    IncreasingEyes
], Girl.prototype, "faceValue", null);
__decorate([
    __param(0, paramDecorator('parameter decorator'))
], Girl.prototype, "getAge", null);
Girl = __decorate([
    thinFace,
    classDecorator('class decorator')
], Girl);

The function of __decorate is to execute the decorator function. A lot of information can be seen from this code, which confirms the conclusion drawn above.

From the __decorate calling order, we can see that when multiple types of decorators are used together, the order is attribute decorator -> accessor decorator -> method decorator -> parameter decorator -> class decorator.

The __decorate function is called, and the parameters passed in are different depending on the type of decorator used.

The first parameter passed in is the same, which is an array, so as to ensure that it is consistent with the order we write. Each item is the evaluated decorator function. If @propertyDecorator() is written, it will be executed right away to get the decorator function, which is consistent with the above analysis.

Class decorators take the class as the second argument, other decorators take the prototype object as the second argument, the property name as the third, and the fourth is null or void 0. The value of void 0 is undefined, which means no parameters are passed.

Remember the number and value of the parameters passed to the __decorate function. When you go deeper into the __decorate source code, these values ​​will be used to determine how many parameters to pass in when executing the decorator function.

OK, let's look at the __decorate function implementation:

// This function already exists, use it directly, otherwise define it yourself var __decorate = (this && this.__decorate) ||
// Receive four parameters: 
//decorators stores the array of decorator functions and the target prototype object|class,
//key attribute name, desc description (undefined or null)
function(decorators, target, key, desc) {
  var c = arguments.length,
  // Get the number of parameters r = c < 3 // If the number of parameters is less than three, it means it is a class decorator, and get the class directly? target
    : desc === null // If the fourth parameter is null, the object needs to be described; the property decorator passes in void 0, and there is no description object.
        ?desc = Object.getOwnPropertyDescriptor(target, key) 
        : desc,
  d;
  // If the Reflect.decorate method is provided, call it directly; otherwise implement it yourself if (typeof Reflect === "object" && typeof Reflect.decorate === "function") 
    r = Reflect.decorate(decorators, target, key, desc);
  else 
    // The execution order of decorator functions is opposite to the order in which they are written, from bottom to top for (var i = decorators.length - 1; i >= 0; i--) 
      if (d = decorators[i]) // Get the decorator function r = (c < 3 // If the number of parameters is less than 3, it means it is a class decorator. Execute the decorator function and pass it directly to the class? d(r) 
            : c > 3 // If the number of parameters is greater than three and it is a method decorator, accessor decorator, or parameter decorator, execute the passed description object? d(target, key, r) 
              : d(target, key) // It is a property decorator, and the description object is not passed in) || r;

  // Set the description object for the decorated attribute, mainly for methods and attributes/*** 
     * There are two cases for the value of r.
     * One is the value obtained through Object.getOwnPropertyDescriptor above * The other is the return value after the decorator function is executed, which is used as the description object.
     * Generally, decorator functions do not return values.
    */
  return c > 3 && r && Object.defineProperty(target, key, r),r;
};

The parameter decorator above calls a function called __params.

var __param = (this && this.__param) || function (paramIndex, decorator) {
    return function (target, key) { decorator(target, key, paramIndex); }
};

The purpose is to pass the parameter position paramIndex to the decorator function.

After reading the compiled source code, I believe you will have a deeper understanding of decorators.

The above is the details of JS decorator pattern and TypeScript decorator. For more information about JS, please pay attention to other related articles on 123WORDPRESS.COM!