结构型模式：装饰器模式

简介

在软件开发过程中，有时想用一些现存的组件。这些组件可能只是完成了一些核心功能。但在不改变其结构的情况下，可以动态地扩展其功能。所有这些都可以釆用装饰器模式来实现。

装饰器模式指：在不改变现有对象结构的情况下，动态的给对象增加一些职责（功能）的一种模式。

这种模式也是防止滥用继承，相对于桥接模式只能桥接两个维度，装饰器模式是可以对接多个维度的，因为他可以嵌套使用。

我们举个例子：

我有一个食物类：class 煎饼

我单点煎饼这个食物是可以的，我也可以加不同的配料：鸡蛋、火腿、豆皮

于是乎我们通过继承得到：

• class 鸡蛋煎饼 extends 煎饼
• class 火腿煎饼 extends 煎饼
• class 豆皮煎饼 extends 煎饼

这样写好像没有什么问题，但是，配料我能不能加两个，我甚至加三个，于是就有了：鸡蛋豆皮煎饼、火腿豆皮煎饼...等等，这个类的数量就会指数上升。

甚至于，我们能不能在鸡蛋豆皮煎饼这个类上再发展出新的子类：加辣、不辣、巨辣

你会发现很简单的需求，就使得类的暴增，这显然不符合我们需求。

解决办法和桥接一样，都是通过使用组合的方式来打断继承。

通常情况下，扩展一个类的功能会使用继承方式来实现。但继承具有静态特征，耦合度高，并且随着扩展功能的增多，子类会很膨胀。如果使用组合关系来创建一个包装对象（即装饰对象）来包裹真实对象，并在保持真实对象的类结构不变的前提下，为其提供额外的功能，这就是装饰器模式的目标。

装饰器模式的角色

1. 抽象构件（Component）角色：定义一个抽象接口以规范准备接收附加责任的对象。
2. 具体构件（ConcreteComponent）角色：实现抽象构件，通过装饰角色为其添加一些职责。
3. 抽象装饰（Decorator）角色：继承抽象构件，并包含具体构件的实例，可以通过其子类扩展具体构件的功能。
4. 具体装饰（ConcreteDecorator）角色：实现抽象装饰的相关方法，并给具体构件对象添加附加的责任。

在简单的需求下，可能就只有一个具体的装饰，那么装饰和抽象就可以作为一个具体装饰来写，省去单独的抽象装饰。

代码实现

//煎饼接口
interface Pancakes {
  name(): string;
}

//煎饼的实现
class Pancake implements Pancakes {
  name(): string {
    return "煎饼";
  }
}

//抽象装饰器
class Decorator implements Pancakes {
  pancake: Pancake; //聚合

  constructor(pancake: Pancake) {
    this.pancake = pancake;
  }

  name(): string {
    return this.pancake.name();
  }
}

//豆干火腿装饰器
class DGDecorator extends Decorator {
  constructor(pancake: Pancake) {
    super(pancake);
  }

  name(): string {
    const oldName = super.name();
    return `豆干火腿${oldName}`;
  }
}

抽象装饰器的作用其实就是为了扩展子类的，如果没有那么多子类扩展，单写一个具体实现也行。

装饰器模式可以理解为类继承的另一种实现，它跟继承一样都会有抽象定义的那些属性方法，完全遵循开闭原则，对原对象修改是关闭的，装饰器来进行扩展。更加灵活。

typescript中的装饰器

由于我们js其实很少用类去编写代码，所以上述代码可能在实际使用中很少去使用，但是我们可以看看ts中装饰器。

由于js的函数存在函数提升，所以目前ts中的装饰器只能用在类上面，因为类是没有提升的，不能未声明前使用。

而js原生装饰器目前还在提案中，ts的装饰器也只是语法糖。

装饰器如果需要再ts中使用，需要配置一下ts.config.ts

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

原理

function getName(): string {
  return "name";
}

//装饰器函数
function decorator(targetFn: Function) {
  return function (...args: any[]) {
    if (typeof targetFn !== "function") return;
    console.log("装饰器自己的处理");
    return targetFn.apply(this, args);
  };
}

//调用
const newFn = decorator(getName);
console.log(newFn());

但是这么写的话，如果有6个装饰器，那你的函数就会嵌套多个，非常不利于阅读，所以ts它使用这种方式调用：

@decorator
function getName(): string {
  return "name";
}

这是伪代码，因为ts的装饰器他是有自己的对应特殊处理的。

装饰器分类

装饰器分为三种：

1. 类装饰器
2. 成员装饰器
3. 参数装饰器

顾名思义，类装饰器是用于装饰类的，成员装饰器用于装饰类里面的成员，参数则是类里面函数的参数。

类装饰器

function classDecorator(target: Object) {
  console.log(target); //class A {}
}

@classDecorator
class A {
  name() {
    return "A";
  }
}

类装饰器也是一个函数，ts只是加了特殊调用的方式@classDecorator，改函数接受一个参数，这个参数就是被装饰的类本身。

注意：

• void: 当没有返回值的时候，整个类的行为不会被返回值所影响
• new Class: 返回一个新的类的时候，被装饰的类会被这个新的类直接替换(不建议)

成员装饰器

function memberDecorator(target: Object, key: string, descriptor: PropertyDescriptor) {
  console.log(target);
  console.log(key);
  console.log(descriptor);
}

class A {
  @memberDecorator
  name() {
    return "A";
  }
}

成员装饰器接受三个参数：

1. target：如果装饰器装饰的是静态成员，则target是类本身，如果装饰器装饰的是实例成员，比如上述的name函数，target则是该类的原型prototype对象。
2. key：代表当前修饰的键值
3. desdescriptor：该key的属性描述对象，可以设置是否允许读写这些

成员装饰器不能有返回值

参数装饰器

function parameterDecorator(target: Object, methodName: string, index: number) {
  console.log(target);
  console.log(methodName);
  console.log(index);
}

class A {
  name(@parameterDecorator name: string) {
    return name;
  }
}

参数装饰器接受三个参数：

1. target：如果装饰器装饰的是静态成员方法的参数，则target是类本身，如果装饰器装饰的是实例成员方法的参数，比如上述的name函数，target则是该类的原型prototype对象。
2. methodName：装饰的参数所在的方法名称，注意是名称，string的
3. index：参数所在函数参数中的索引

参数装饰器不能有返回值

参数装饰器更多的可能是更高阶的用法，比如跟元信息进行配合使用，用来做一些数据校验什么的。