状态模式详解：JS实现状态机方法

状态模式是一种优雅的设计模式，它通过将对象的行为与其内部状态解耦，把不同状态下的逻辑封装进独立的状态类中，从而彻底摆脱冗长复杂的if/else条件判断；文章以JavaScript实现的灯开关为例，清晰展示了上下文（如Light）、状态接口与具体状态（如OnState/OffState）三者协作的核心机制，并深入剖析了其消除条件逻辑、提升可扩展性与职责分离的显著优势，特别适合订单流程、UI组件状态、游戏角色行为等多状态动态场景——让你的代码更清晰、更健壮、也更从容应对未来变化。

JS状态模式是一种设计模式，用来让一个对象在其内部状态改变时改变它的行为。换句话说，对象看起来像是修改了它的类。这种模式特别适用于一个对象的行为依赖于它的状态，并且状态越多、条件判断越复杂，使用状态模式就越能简化逻辑。

状态模式的核心思想

将对象中与特定状态相关的行为封装到独立的状态类或对象中，而不是用大量的条件语句（如 if/else 或 switch）来处理不同状态下的行为。这样可以让代码更清晰、更易于维护和扩展。

关键点包括：

• 上下文（Context）：持有当前状态的对象，对外提供接口，把状态相关的行为委托给当前状态对象处理。
• 状态接口/基类：定义状态共有的行为方法，各具体状态实现这些方法。
• 具体状态（Concrete State）：每个状态实现自己的行为逻辑，必要时可切换上下文的状态。

一个简单的例子

假设我们要实现一个灯的开关功能，灯有两种状态：开和关。使用状态模式可以避免在主对象中写 if 判断。

// 具体状态：关
const OffState = {
  press: function (light) {
    console.log('开灯');
    light.setState(OnState);
  }
};

// 具体状态：开
const OnState = {
  press: function (light) {
    console.log('关灯');
    light.setState(OffState);
  }
};

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

Light.prototype.setState = function (state) {
  this.state = state;
};

Light.prototype.press = function () {
  this.state.press(this); // 委托给当前状态处理
};

// 使用示例
const light = new Light();
light.press(); // 开灯
light.press(); // 关灯
light.press(); // 开灯

状态模式的优点

使用状态模式的好处在于：

• 消除复杂的条件判断：不再需要一长串 if/else 来判断状态。
• 扩展性强：新增状态时只需添加新的状态对象，不用修改原有代码。
• 职责清晰：每个状态的行为独立封装，便于理解和测试。

适用场景

当一个对象有多个状态，并且行为随状态变化而变化时，适合使用状态模式。常见场景包括：

• 按钮的启用/禁用/加载状态
• 订单的待支付、已支付、已发货、已完成等流程
• 游戏中的角色状态（奔跑、跳跃、攻击）

今天关于《状态模式详解：JS实现状态机方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！