什么是JavaScript中的状态模式？

状态模式属于行为型设计模式，核心思想是当一个对象的内在状态改变时允许改变其行为，让对象看起来像是修改了它的类。在JavaScript开发中，我们经常会遇到需要根据不同状态执行不同逻辑的场景，比如播放器的播放、暂停、停止状态，或者订单的待支付、已支付、已发货、已完成状态，如果不做处理很容易写出大量嵌套的条件判断代码，而状态模式就能优雅地解决这个问题。

状态模式的核心组成

状态模式主要包含三个部分：

• 上下文（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 StopState extends PlayerState {
  play() {
    console.log('开始播放');
    // 切换到播放状态
    this.player.setState(this.player.playState);
  }
  pause() {
    console.log('当前是停止状态，无法暂停');
  }
  stop() {
    console.log('已经是停止状态，无需重复操作');
  }
}

// 播放状态
class PlayState extends PlayerState {
  play() {
    console.log('已经在播放中，无需重复操作');
  }
  pause() {
    console.log('暂停播放');
    // 切换到暂停状态
    this.player.setState(this.player.pauseState);
  }
  stop() {
    console.log('停止播放');
    // 切换到停止状态
    this.player.setState(this.player.stopState);
  }
}

// 暂停状态
class PauseState extends PlayerState {
  play() {
    console.log('继续播放');
    // 切换到播放状态
    this.player.setState(this.player.playState);
  }
  pause() {
    console.log('已经是暂停状态，无需重复操作');
  }
  stop() {
    console.log('停止播放');
    // 切换到停止状态
    this.player.setState(this.player.stopState);
  }
}

3. 实现上下文Player类

上下文类持有所有状态实例，负责状态切换和请求委托：

// 播放器上下文类
class Player {
  constructor() {
    // 初始化所有状态实例
    this.stopState = new StopState(this);
    this.playState = new PlayState(this);
    this.pauseState = new PauseState(this);
    // 默认初始状态为停止状态
    this.currentState = this.stopState;
  }
  // 切换状态
  setState(state) {
    this.currentState = state;
  }
  // 委托当前状态处理播放请求
  play() {
    this.currentState.play();
  }
  // 委托当前状态处理暂停请求
  pause() {
    this.currentState.pause();
  }
  // 委托当前状态处理停止请求
  stop() {
    this.currentState.stop();
  }
}

4. 测试状态模式效果

创建播放器实例，测试不同状态下的行为：

// 创建播放器实例
const player = new Player();
// 初始为停止状态，点击播放
player.play(); // 输出：开始播放
// 当前为播放状态，点击暂停
player.pause(); // 输出：暂停播放
// 当前为暂停状态，点击播放
player.play(); // 输出：继续播放
// 当前为播放状态，点击停止
player.stop(); // 输出：停止播放
// 当前为停止状态，点击暂停
player.pause(); // 输出：当前是停止状态，无法暂停

状态模式的优势与适用场景

状态模式的优势非常明显：首先它消除了大量的条件判断语句，让代码逻辑更清晰；其次每个状态的行为被封装在独立的状态类中，符合单一职责原则，修改某个状态的行为不会影响其他状态；另外新增状态时只需要新增具体状态类，不需要修改上下文和其他状态的代码，符合开闭原则。

适用场景主要有：对象的行为依赖它的状态，并且它需要在运行时根据状态改变行为；代码中包含大量与对象状态有关的条件判断语句，且这些判断会随状态增加而变复杂。比如电商订单状态流转、游戏角色状态切换、页面交互状态管理等场景，都可以考虑使用状态模式来优化代码结构。

状态模式JavaScript设计模式状态切换行为封装修改时间：2026-06-05 02:05:34