装饰器

装饰器

如果我们想为一个类增加一些功能，但是又不通过继承的方式就可以使用装饰器
使用方法：创建一个装饰类，来包装原有的类
通过一个例子来解释

class Polygin {
  describe () {
    console.log('我是一个多边形')
  }
}
class Triangle extends Polygin {
  describe () {
    super.describe()
    console.log('我也是三角形')
  }
}
class Quadrilateral extends Polygin {
  describe () {
    super.describe()
    console.log('我也是四角形')
  }
}
class FiveAngleShape extends Polygin {
  describe () {
    super.describe()
    console.log('我也是五角形')
  }
} 

上面例子定义了一个多边形和它的三个子类三角形、四边形和五边形，现在我想给三角形、四边形和五边形画上红色的背景，使用继承实现

class RedTriangle extends Triangle {
  describe () {
    super.describe()
    console.log('绘制红色的背景')
  }
}
class RedQuadrilateral extends Quadrilateral{
  describe () {
    super.describe()
    console.log('绘制红色的背景')
  }
}
class RedFiveAngleShape extends FiveAngleShape{
  describe () {
    super.describe()
    console.log('绘制红色的背景')
  }
}
var aRedTriangle = new RedTriangle()
var aRedQuadrilateral = new RedQuadrilateral()
var aRedFiveAngleShape = new RedFiveAngleShape()
aRedTriangle.describe()
aRedQuadrilateral.describe()
aRedFiveAngleShape.describe()

使用装饰器实现，只需要定义一个多边形的装饰器

class PolyginDecorator {
  constructor (polygin) {
    this.polygin = polygin
  }
  describe() {
    this.polygin.describe()
    console.log("我是红色的")
  }
}
var aRedTriangle = new PolyginDecorator(new Triangle())
var aRedQuadrilateral = new PolyginDecorator(new Quadrilateral())
var aRedFiveAngleShape = new PolyginDecorator(new FiveAngleShape())
aRedTriangle.describe()
aRedQuadrilateral.describe()
aRedFiveAngleShape.describe()

PolyginDecorator是一个装饰器，给多边形增加了一个新功能：绘制红色的背景，然后通过传入实例，实现给特定种类的多边形绘制背景色的功能，可以看出

1. 创造了一个装饰类（PolyginDecorator），来包装原有类（Polygin）
2. 装饰器与被装饰对象有一个同名的方法
3. 该方法必须实现原有类的功能
4. 该方法还提供了额外的功能

现在我想给这些多边形绘制其他的颜色，比如黄色、蓝色等等，如果使用继承来实现，那么对于每一个多边形，继续定义YellowTriangle、BlueTriangle。。。，子类就会变得非常多，代码会非常臃肿。考虑使用装饰器，通过组合的方式实现功能扩展

class PolyginDecorator {
  constructor (polygin, backgroundColor) {
    this.polygin = polygin
    this.backgroundColor = backgroundColor
  }
  describe() {
    this.polygin.describe()
    this.backgroundColor.draw()
  }
}
class BackgroundColor {
  constructor(color) {
    this.color = color
  }
  draw () {
    console.log('绘制' + this.color + '的背景')
  }
}
var aRedTriangle = new PolyginDecorator(new Triangle(), new BackgroundColor('蓝色'))
var aRedQuadrilateral = new PolyginDecorator(new Quadrilateral(), new BackgroundColor('黄色'))
var aRedFiveAngleShape = new PolyginDecorator(new FiveAngleShape(), new BackgroundColor('白色'))
aRedTriangle.describe()
aRedQuadrilateral.describe()
aRedFiveAngleShape.describe()

通过实例看出，装饰器相对于子类的优点

1. 减少了子类的增加，避免因功能扩展激增而造成子类膨胀代码臃肿
2. 装饰器相对于子类更加灵活，可以通过组合的方式增加一些额外的功能