JavaScript设计模式 -- 装饰者模式

最新推荐文章于 2025-05-28 19:01:42 发布

原创最新推荐文章于 2025-05-28 19:01:42 发布 · 1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#设计模式

javascript 专栏收录该内容

16 篇文章

订阅专栏

在开发过程中，我们常常需要在不修改原有代码的情况下，为对象动态添加额外的功能。**装饰者模式（Decorator Pattern）**正是为了解决这一问题而诞生的。它通过创建一个包装对象，在不改变原对象接口的前提下，动态地扩展其行为，使得功能的扩展更加灵活、易于维护。

本文将详细介绍装饰者模式的原理和结构，并通过多个 JavaScript 示例展示如何在实际开发中运用这一模式。

装饰者模式简介

装饰者模式属于结构型设计模式，它的核心思想是在运行时将对象嵌入到封装对象中，以扩展对象的行为而无需修改原有对象。通过这种方式，可以在保持对象接口不变的情况下，为对象增加额外的功能。

适用场景包括但不限于：

在不改变对象接口的前提下，动态地给对象添加功能。
需要在多个独立的装饰中灵活组合扩展对象行为时。
通过装饰者避免生成大量子类，从而降低系统的复杂性。

装饰者模式的核心结构

装饰者模式通常包含以下几个角色：

组件（Component）：定义一个对象接口，可以给这些对象动态地添加职责。
具体组件（Concrete Component）：实现组件接口的基本对象。
装饰者（Decorator）：持有一个组件对象的引用，并实现与组件接口一致的接口。
具体装饰者（Concrete Decorator）：继承自装饰者，对组件进行功能扩展。

这种结构确保了装饰者和具体组件具有一致的接口，使得装饰者可以在不改变客户端代码的情况下替换原有组件。

JavaScript 实现示例

下面我们将通过两个示例展示如何在 JavaScript 中使用装饰者模式扩展对象的功能。

示例 1：咖啡饮品装饰者

假设我们有一个基本的咖啡对象，现在希望根据客户的需求动态添加牛奶、摩卡等额外调料，而不是通过继承创建多个子类。装饰者模式可以完美解决这一问题。

// 定义咖啡（Component）接口
class Coffee {
  getCost() {
    throw new Error('该方法必须被重写');
  }
  getDescription() {
    throw new Error('该方法必须被重写');
  }
}

// 具体组件：基础咖啡
class BasicCoffee extends Coffee {
  getCost() {
    return 5;
  }
  getDescription() {
    return '基础咖啡';
  }
}

// 装饰者基类
class CoffeeDecorator extends Coffee {
  constructor(coffee) {
    super();
    this.decoratedCoffee = coffee;
  }
  getCost() {
    return this.decoratedCoffee.getCost();
  }
  getDescription() {
    return this.decoratedCoffee.getDescription();
  }
}

// 具体装饰者：加牛奶
class MilkDecorator extends CoffeeDecorator {
  getCost() {
    return super.getCost() + 2;
  }
  getDescription() {
    return super.getDescription() + ', 牛奶';
  }
}

// 具体装饰者：加摩卡
class MochaDecorator extends CoffeeDecorator {
  getCost() {
    return super.getCost() + 3;
  }
  getDescription() {
    return super.getDescription() + ', 摩卡';
  }
}

// 客户端调用示例
let myCoffee = new BasicCoffee();
console.log(myCoffee.getCost());         // 输出：5
console.log(myCoffee.getDescription());    // 输出：基础咖啡

// 加牛奶
myCoffee = new MilkDecorator(myCoffee);
console.log(myCoffee.getCost());         // 输出：7
console.log(myCoffee.getDescription());    // 输出：基础咖啡, 牛奶

// 再加摩卡
myCoffee = new MochaDecorator(myCoffee);
console.log(myCoffee.getCost());         // 输出：10
console.log(myCoffee.getDescription());    // 输出：基础咖啡, 牛奶, 摩卡

在这个示例中，我们通过装饰者（MilkDecorator 和 MochaDecorator）动态扩展了咖啡对象的功能，客户端无需修改原有的咖啡类即可获得丰富的调料组合。

示例 2：增强函数行为的装饰器

在 JavaScript 中，函数也是对象。利用装饰者模式，可以动态增强函数的行为，例如为函数增加日志记录、性能监控或缓存等功能。

// 定义一个基础函数：计算两个数字之和
function add(a, b) {
  return a + b;
}

// 定义一个装饰器函数，为目标函数增加日志记录功能
function logDecorator(fn) {
  return function(...args) {
    console.log(`调用函数 ${fn.name} 参数: ${args.join(', ')}`);
    const result = fn(...args);
    console.log(`函数 ${fn.name} 返回: ${result}`);
    return result;
  };
}

// 使用装饰器增强 add 函数
const decoratedAdd = logDecorator(add);

// 客户端调用
decoratedAdd(3, 4);
// 控制台输出：
// 调用函数 add 参数: 3, 4
// 函数 add 返回: 7

这种方式能够在不改变原有函数实现的前提下，动态增加额外的行为。你可以根据需要创建多个装饰器，并灵活地组合它们。