浅谈JavaScript的装饰器模式

3.1、前言

​ 在不改变原对象的基础上，对其进行包装拓展。

在装饰器模式中，一个对象被另一个对象包装起来，形成一条包装链，并增加了原先对象的功能。

3.2、代码

我们来简单实现一个王者荣耀的英雄 东方镜

// 首先创建一个英雄类，它包含英雄的基本属性和方法
class Hero {
  constructor(name, type, hp, defense, attack) {
    this.name = name;
    this.type = type;
    this.hp = hp;
    this.defense = defense;
    this.attack = attack;
    this.level = 1;
  }
  getInfo() {
    return `当前英雄的名字:${this.name}、职业：${this.type}、等级：${this.level}`;
  }
  getStats() {
    return `${this.name}当前的状态：生命值-${this.hp}、攻击力：${this.attack}防御：${this.defense}`;
  }
  levelUp() {
    this.level += 1;
    this.hp += 500;
    this.defense += 50;
    this.attack += 10;
  }
  attackEnemy(enemy) {
    enemy.hp = this.attack - enemy.defense;
    console.log(
      `${this.name} 攻击 ${enemy.name} ，当前剩余生命值：${enemy.hp}`
    );
  }
}
// 创建一个攻击力增强的装饰器，用来增加东方镜的攻击力
function JingAttackDecorator(hero) {
  hero.attack += 10;
  return hero;
}
// 创建一个升级的装饰器，用来提升东方镜的等级
function JingLevelUpDecorator(hero) {
  hero.levelUp();
  return hero;
}
//使用这个装饰器来创建一个增强版的东方镜：
const dongfangjing = new Hero("东方镜", "刺客", 2000, 200, 175);
console.log("东方镜增强之前的信息", dongfangjing.getInfo());
console.log("东方镜增强之前的信息", dongfangjing.getStats());
const enhancedAttackJing = JingAttackDecorator(dongfangjing);
const enhancedLevelJing = JingLevelUpDecorator(enhancedAttackJing);
console.log("东方镜增强后的信息", enhancedLevelJing.getInfo());
console.log("东方镜增强后的信息", enhancedLevelJing.getStats());

3.3、优缺点

3.3.1、优点

1. 提高复用性：装饰器允在不修改已有代码的情况下，对代码进行扩展和修改，从而增加代码的可维护性和可扩展性
2. 提高可扩展性：在不修改已有代码的前提下，对源代码进行扩展和修改 。
3. 代码简洁，易于理解：装饰器允许在不修改已有代码的情况下，对代码进行扩展和修改，从而增加代码的可维护性和可扩展性
4. 解耦：装饰类和被装饰类可以独立发展，不会相互耦合。

3.3.2、缺点

1. 排查问题复杂：多层装饰时需要层层深入比较麻烦。
2. 运行效率可能降低：装饰器在运行时需要进行额外的操作，特别是当装饰器被大量使用的时候。