js design patterns: what is the decorator pattern? Introduction to js decorator pattern

This article brings you content about js design patterns: What is the decorator pattern? The introduction of js decorator mode has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is the decorator pattern?

Definition: Dynamicly add some additional responsibilities to an object. In terms of adding functionality, the decorator pattern is more flexible than generating subclasses.

Main solution: Generally, we often use inheritance to extend a class. Since inheritance introduces static features to the class, and as the extension functions increase, the subclass will be very expanded. .

When to use: Extend a class without adding many subclasses.

How to solve: Divide specific functional responsibilities and inherit the decorator pattern.

js Decorator Pattern Application Example: 1. Sun Wukong has 72 changes. When he becomes a "temple", he is still a monkey at base, but he has the power of a temple. Function. 2. A painting can be hung on the wall regardless of whether it has a frame or not, but usually it has a frame, and the frame is actually hung on the wall. Before being hung on the wall, the painting can be glazed and framed; then the painting, glass and frame form one object.

Advantages of js decorator pattern: The decorating class and the decorated class can develop independently and will not be coupled to each other. The decorating mode is an alternative mode to inheritance. The decorating mode can dynamically extend an implementation class. function.

Disadvantages of js decorator mode: Multi-layer decoration is more complicated.

js decorator pattern usage scenarios: 1. Extend the functionality of a class. 2. Dynamically add functions and dynamically cancel them.

Note: can replace inheritance.

js Decorator Pattern Example

Examples in life: When the weather is cold, add clothes to keep warm; when the weather is hot, take off your coat; this example covers it vividly The charm of the decoration allows the clothes to be put on and taken off dynamically as the weather changes.

let wear = function() {
  console.log('穿上第一件衣服')
}

const _wear1 = wear

wear = function() {
  _wear1()
  console.log('穿上第二件衣服')
}

const _wear2 = wear

wear = function() {
  _wear2()
  console.log('穿上第三件衣服')
}

wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

This method has the following disadvantages: 1: Temporary variables will become more and more; 2: This pointer sometimes makes mistakes

AOP Decoration Function

// 前置代码
Function.prototype.before = function(fn) {
  const self = this
  return function() {
    fn.apply(this, arguments)
    return self.apply(this, arguments)
  }
}

// 后置代码
Function.prototype.after = function(fn) {
  const self = this
  return function() {
    self.apply(this, arguments)
    return fn.apply(this, arguments)
  }
}

Use Post-code to experiment with the above demo of wearing clothes,

const wear1 = function() {
  console.log('穿上第一件衣服')
}

const wear2 = function() {
  console.log('穿上第二件衣服')
}

const wear3 = function() {
  console.log('穿上第三件衣服')
}

const wear = wear1.after(wear2).after(wear3)
wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

But this sometimes pollutes the native function, you can make some changes

const after = function(fn, afterFn) {
  return function() {
    fn.apply(this, arguments)
    afterFn.apply(this, arguments)
  }
}

const wear = after(after(wear1, wear2), wear3)
wear()

Related recommendations:

js design pattern: What is the mediator pattern? Introduction to the js mediator pattern

js design pattern: What is the chain of responsibility pattern? Introduction to the js chain of responsibility pattern

#js design pattern: What is the flyweight pattern? Introduction to js flyweight mode

The above is the detailed content of js design patterns: what is the decorator pattern? Introduction to js decorator pattern. For more information, please follow other related articles on the PHP Chinese website!