装饰器
如果我们想为一个类增加一些功能，但是又不通过继承的方式就可以使用装饰器
使用方法：创建一个装饰类，来包装原有的类
通过一个例子来解释
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是一个装饰器，给多边形增加了一个新功能：绘制红色的背景，然后通过传入实例，实现给特定种类的多边形绘制背景色的功能，可以看出
- 创造了一个装饰类（PolyginDecorator），来包装原有类（Polygin）
- 装饰器与被装饰对象有一个同名的方法
- 该方法必须实现原有类的功能
- 该方法还提供了额外的功能
现在我想给这些多边形绘制其他的颜色，比如黄色、蓝色等等，如果使用继承来实现，那么对于每一个多边形，继续定义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()
通过实例看出，装饰器相对于子类的优点
- 减少了子类的增加，避免因功能扩展激增而造成子类膨胀代码臃肿
- 装饰器相对于子类更加灵活，可以通过组合的方式增加一些额外的功能
