如何用JavaScript使用状态模式？

状态模式是一种行为设计模式，核心思想是当对象的状态发生改变时，它的行为也会随之改变，看起来就像是对象本身发生了改变一样。在JavaScript开发中，我们经常会遇到需要根据不同状态执行不同逻辑的场景，比如播放器的播放、暂停、停止状态，订单的待支付、已支付、已发货状态等，如果直接用if-else或者switch-case判断，代码会变得非常臃肿，后期维护也很困难，这时候就可以用状态模式来优化。

状态模式的核心组成

状态模式的实现通常包含三个部分：

• 上下文对象（Context）：持有当前的状态实例，对外提供统一的接口，状态切换和逻辑执行都通过上下文对象触发。
• 抽象状态类（State）：定义所有状态共同的行为接口，保证不同状态实现相同的方法。
• 具体状态类（ConcreteState）：继承或实现抽象状态类，每个类对应一种具体状态，实现该状态下的具体行为逻辑。

JavaScript实现状态模式示例

我们以播放器为例，播放器有三种状态：停止、播放、暂停，不同状态下点击播放按钮会有不同的行为，下面用状态模式实现这个场景。

1. 定义抽象状态类

先定义所有状态都需要实现的方法，这里播放器状态需要支持播放、暂停、停止三个操作。

// 抽象状态类，定义状态的行为接口
class PlayerState {
  constructor(player) {
    this.player = player; // 持有播放器上下文的引用
  }
  // 播放操作
  play() {
    throw new Error('具体状态需要实现play方法');
  }
  // 暂停操作
  pause() {
    throw new Error('具体状态需要实现pause方法');
  }
  // 停止操作
  stop() {
    throw new Error('具体状态需要实现stop方法');
  }
}

2. 定义具体状态类

分别实现停止、播放、暂停三个具体状态类，每个类对应状态下的行为逻辑。

// 停止状态
class StoppedState extends PlayerState {
  play() {
    console.log('开始播放音频');
    // 切换到播放状态
    this.player.setState(this.player.playingState);
  }
  pause() {
    console.log('当前处于停止状态，无法暂停');
  }
  stop() {
    console.log('当前已经是停止状态，无需重复操作');
  }
}

// 播放状态
class PlayingState extends PlayerState {
  play() {
    console.log('当前正在播放，无需重复播放');
  }
  pause() {
    console.log('暂停播放音频');
    // 切换到暂停状态
    this.player.setState(this.player.pausedState);
  }
  stop() {
    console.log('停止播放音频');
    // 切换到停止状态
    this.player.setState(this.player.stoppedState);
  }
}

// 暂停状态
class PausedState extends PlayerState {
  play() {
    console.log('继续播放音频');
    // 切换到播放状态
    this.player.setState(this.player.playingState);
  }
  pause() {
    console.log('当前处于暂停状态，无需重复暂停');
  }
  stop() {
    console.log('停止播放音频');
    // 切换到停止状态
    this.player.setState(this.player.stoppedState);
  }
}

3. 定义上下文对象（播放器）

播放器作为上下文对象，持有所有状态实例和当前状态，对外提供统一的状态操作接口。

// 播放器上下文对象
class AudioPlayer {
  constructor() {
    // 初始化所有状态实例
    this.stoppedState = new StoppedState(this);
    this.playingState = new PlayingState(this);
    this.pausedState = new PausedState(this);
    // 默认初始状态为停止状态
    this.currentState = this.stoppedState;
  }
  // 设置当前状态
  setState(state) {
    this.currentState = state;
  }
  // 对外暴露的播放方法
  play() {
    this.currentState.play();
  }
  // 对外暴露的暂停方法
  pause() {
    this.currentState.pause();
  }
  // 对外暴露的停止方法
  stop() {
    this.currentState.stop();
  }
}

4. 测试状态模式效果

创建播放器实例，调用不同方法查看状态切换和行为的表现。

// 创建播放器实例
const player = new AudioPlayer();

// 第一次点击播放，从停止状态切换到播放状态
player.play(); // 输出：开始播放音频
// 再次点击播放，当前是播放状态，提示无需重复播放
player.play(); // 输出：当前正在播放，无需重复播放
// 点击暂停，切换到暂停状态
player.pause(); // 输出：暂停播放音频
// 点击停止，切换到停止状态
player.stop(); // 输出：停止播放音频
// 点击暂停，停止状态下无法暂停
player.pause(); // 输出：当前处于停止状态，无法暂停

状态模式的适用场景

如果你的项目中出现以下情况，就可以考虑使用状态模式：

• 对象的行为依赖于它的状态，并且需要根据状态改变动态改变行为。
• 代码中包含大量的条件判断语句，且这些条件判断都是和对象状态相关的。
• 多个状态之间的切换逻辑复杂，后期可能需要新增状态或者修改状态逻辑。

使用注意事项

状态模式虽然能优化复杂状态逻辑，但也不是所有场景都适用：

• 如果状态数量很少，且逻辑简单，使用if-else反而更直观，不需要额外引入状态模式增加代码复杂度。
• 具体状态类之间如果有共享的逻辑，可以抽离到抽象状态类中，避免代码重复。
• 上下文对象和状态类之间的引用要注意避免循环依赖，通常状态类只持有上下文的引用，不修改上下文的内部状态，只通过上下文提供的方法切换状态。

状态模式JavaScript设计模式状态切换修改时间：2026-05-24 23:18:41