状态模式详解与实战应用

一分耕耘，一分收获！既然都打开这篇《JavaScript状态模式详解与应用》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

状态模式通过封装不同状态下的行为使对象在状态改变时改变其行为。以电灯为例，关态（OffState）按下开关变为开态（OnState），反之亦然；上下文（Light）持有当前状态并委托调用pressSwitch方法实现状态切换。核心角色包括Context（如Light类）、State接口及ConcreteState（如OnState、OffState）。优势在于消除冗长条件判断，提升可维护性，适用于订单状态、游戏角色动作等有限状态机场景。

状态模式是一种行为设计模式，它允许对象在内部状态改变时改变其行为。我们常常会遇到这样的场景：一个对象的行为取决于它的状态，而且状态会在运行时发生改变。如果不使用状态模式，通常会用大量的条件判断来处理不同状态下的行为，导致代码臃肿且难以维护。

状态模式的核心思想

将对象中与特定状态相关的行为封装到独立的状态类中，把状态的切换逻辑委托给状态对象处理。这样一来，原对象（上下文）无需关心具体行为如何实现，只需调用当前状态对象的方法即可。

核心角色包括：

• Context（上下文）：持有当前状态对象的引用，对外提供接口供客户端调用。
• State（状态接口）：定义状态行为的通用接口。
• ConcreteState（具体状态）：实现状态接口，封装对应状态下的具体行为。

JavaScript中的实现示例

以电灯为例，电灯有“开”和“关”两种状态，按下开关时行为不同：

// 具体状态类：关
class OffState {
  pressSwitch(context) {
    console.log("灯打开了");
    context.setState(new OnState());
  }
}

// 具体状态类：开
class OnState {
  pressSwitch(context) {
    console.log("灯关闭了");
    context.setState(new OffState());
  }
}

// 上下文：电灯
class Light {
  constructor() {
    this.state = new OffState(); // 初始状态为关
  }

  setState(state) {
    this.state = state;
  }

  pressSwitch() {
    this.state.pressSwitch(this);
  }
}

使用方式：

const light = new Light();
light.pressSwitch(); // 输出：灯打开了
light.pressSwitch(); // 输出：灯关闭了

优势与适用场景

状态模式让状态转换更清晰，避免了冗长的 if/else 或 switch 判断。当对象的行为随状态变化而复杂变化时，该模式特别有用。

常见应用场景：

• 有限状态机，如订单状态（待支付、已发货、已完成）
• 游戏开发中角色状态（站立、奔跑、跳跃）
• UI组件的状态管理（按钮的启用/禁用）

基本上就这些。状态模式通过分离状态逻辑，使代码更易于扩展和维护，尤其适合状态多且行为差异大的情况。不复杂但容易忽略。

终于介绍完啦！小伙伴们，这篇关于《状态模式详解与实战应用》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！