『面试的底气』—— 设计模式之装饰者模式｜8月更文挑战

“这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战”

前言

在面试高级前端时，往往会遇到一些关于设计模式的问题，每次都回答不太理想。恰逢8月更文挑战的活动，准备用一个月时间好好理一下关于设计模式方面的知识点，给自己增加点面试的底气。

定义

给对象动态地增加职责的方式称为装饰者模式，装饰者模式能够在不改变对象自身的基础上，在程序运行期间给对象动态地添加职责。跟继承相比，装饰者是一种更轻便灵活的做法，这是一种“即用即付”的方式，好比天冷了就多穿一件外套。

用类来实现装饰者模式

在类中很少使用装饰者模式，因为使用继承也是可以改变类的。但是还是介绍一下，或许有作用。用一个例子来介绍。

比如把一个枪当作一个原始类，给这只枪强化一下，即可以发出散弹也可以发出普通子弹。在不改变原始类和不用继承的的情况下，可以用装饰者模式来实现。

class Gun{
  constructor(){
  }
  fire(){
    console.log('发射普通子弹')
  }
}
class ShrapnelGun{
  constructor(gun){
    this.gun = gun;
  }
  fire(){
    this.gun.fire();
    console.log( '发射散弹' );
  }
}

const gun = new Gun();
const shrapnelGun = new ShrapnelGun(gun);
shrapnelGun.fire(); // 发射普通子弹 发射散弹

散弹枪类ShrapnelGun接收普通枪类Gun生成的对象，并存储在this.gun，在散弹枪类ShrapnelGun的开枪fire调用普通枪类Gun的开枪fire的方法，也可以执行自己的逻辑，发射出散弹枪。散弹枪类ShrapnelGun相当把普通枪类Gun装饰了一下。

这种给对象动态增加职责的方式，并没有真正地改动对象自身，而是将对象放入另一个对象之中，这些对象以一条链的方式进行引用，形成一个聚合对象。这些对象都拥有相同的接口（fire方法），当请求达到链中的某个对象时，这个对象会执行自身的操作，随后把请求转发给链中的下一个对象。

因为装饰者对象和它所装饰的对象拥有一致的接口，所以它们对使用该对象的客户来说是透明的，被装饰的对象也并不需要了解它曾经被装饰过，这种透明性使得我们可以递归地嵌套任意多个装饰者对象。比如在给散弹枪强化一下，可以发出爆裂弹。可以这么实现：

class Gun{
  constructor(){
  }
  fire(){
    console.log('发射普通子弹')
  }
}
class ShrapnelGun{
  constructor(gun){
    this.gun = gun;
  }
  fire(){
    this.gun.fire();
    console.log( '发射散弹' );
  }
}

class BurstGun{
  constructor(gun){
    this.gun = gun;
  }
  fire(){
    this.gun.fire();
    console.log( '发射爆裂弹' );
  }
}

const gun = new Gun();
const shrapnelGun = new ShrapnelGun(gun);
const burstGun = new BurstGun(shrapnelGun);
shrapnelGun.fire(); // 发射普通子弹 发射散弹 发射爆裂弹 

装饰者模式将一个对象嵌入另一个对象之中，实际上相当于这个对象被另一个对象包装起来，形成一条包装链。请求随着这条链依次传递到所有的对象，每个对象都有处理这条请求的机会。

不使用类来实现装饰者模式

在JavaScript中可以直接改写对象或者对象的某个方法，并不需要使用“类”来实现装饰者模式，代码如下：

const gun = {
  fire: function () {
    console.log('发射普通子弹');
  }
}
const shrapnelGun = function () {
  console.log('发射导弹');
}
const burstGun = function () {
  console.log('发射原子弹');
}
const fire1 = gun.fire;
gun.fire = function () {
  fire1();
  shrapnelGun();
}
const fire2 = gun.fire;
plane.fire = function () {
  fire2();
  burstGun();
}
gun.fire();//发射普通子弹、发散弹、发射爆裂弹

上面只是针对对象来实现装饰者模式，实现在不改变自身对象的基础上给对象新增功能，那针对函数呢？函数在JavaScript中函数又被称为一等对象。

在JavaScript中可以很方便地给某个对象扩展属性和方法，但却很难在不改动某个函数源代码的情况下，给该函数添加一些额外的功能，最简单粗暴的方式就是直接改写该函数，但这是最差的办法，直接违反了开放-封闭原则，而利用装饰者模式可以解决这类问题，具体如何解决，将会在下篇文章中介绍。