首页 > 文章 > 前端

JavaScript状态模式：有限状态机教程详解

时间：2025-12-25 17:23:48 116浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript状态模式：有限状态机实现教程》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

有限状态机（FSM）是一种描述对象在有限状态间转换的模型，包含状态、事件、转移和动作。通过JavaScript实现状态模式可管理如播放器的状态流转：定义状态类封装行为，上下文委托操作，实现清晰解耦。示例中播放器有idle、playing、paused三种状态，支持play、pause、stop操作，状态切换逻辑隔离，符合开闭原则。还可扩展为通用FSM类，通过配置定义初始状态和转移规则，提升复用性与可维护性，适用于订单、登录等场景。

JavaScript状态模式_有限状态机实现

状态模式是一种行为设计模式，适用于对象的行为依赖于其内部状态，并且在运行时根据状态改变行为的场景。结合有限状态机（Finite State Machine, FSM）的思想，使用 JavaScript 实现状态模式可以清晰地管理复杂的状态流转逻辑，比如订单流程、用户登录状态、游戏角色行为等。

什么是有限状态机（FSM）

有限状态机是一种数学模型，用来描述对象在有限个状态之间转换的过程。一个 FSM 通常包含：

状态（States）：对象可能处于的明确状态，如 "空闲"、"运行"、"暂停"
事件（Events）：触发状态转换的动作，如 "开始"、"停止"
转移（Transitions）：定义在某个状态下接收到某个事件后，应切换到哪个新状态
动作（Actions）：状态进入或退出时执行的逻辑

用 JavaScript 实现状态模式 + FSM

我们通过一个简单的播放器示例来实现：播放器有三种状态 —— 待机（idle）、播放（playing）、暂停（paused），支持“播放”、“暂停”、“停止”三个操作。

核心思路是：

每个状态封装自己的行为
上下文对象（播放器）持有当前状态，并将操作委托给当前状态对象处理
状态之间通过预定义规则进行切换

// 状态接口（约定方法）
class PlayerState {
  play(player) { throw new Error('Not implemented'); }
  pause(player) { throw new Error('Not implemented'); }
  stop(player) { throw new Error('Not implemented'); }
}

// 待机状态
class IdleState extends PlayerState {
  play(player) {
    console.log('开始播放');
    player.setState(new PlayingState());
  }
  pause(player) {
    console.log('无法暂停，当前未播放');
  }
  stop(player) {
    console.log('已经停止');
  }
}

// 播放状态
class PlayingState extends PlayerState {
  play(player) {
    console.log('已经在播放');
  }
  pause(player) {
    console.log('暂停播放');
    player.setState(new PausedState());
  }
  stop(player) {
    console.log('停止播放');
    player.setState(new IdleState());
  }
}

// 暂停状态
class PausedState extends PlayerState {
  play(player) {
    console.log('恢复播放');
    player.setState(new PlayingState());
  }
  pause(player) {
    console.log('已经是暂停状态');
  }
  stop(player) {
    console.log('停止播放');
    player.setState(new IdleState());
  }
}

// 上下文：播放器
class AudioPlayer {
  constructor() {
    this.state = new IdleState();
  }

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

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

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

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

使用示例

const player = new AudioPlayer();

player.play();  // 输出：开始播放
player.pause(); // 输出：暂停播放
player.play();  // 输出：恢复播放
player.stop();  // 输出：停止播放
player.pause(); // 输出：无法暂停，当前未播放

这种结构让状态逻辑彼此隔离，新增状态或修改转移规则不会影响其他状态，符合开闭原则。

扩展为通用有限状态机

如果多个模块都需要状态机，可以封装一个通用 FSM 类，通过配置定义状态和转移规则。

class FiniteStateMachine {
  constructor(config) {
    this.currentState = config.initial;
    this.transitions = config.transitions || {};
  }

  transition(event) {
    const nextState = this.transitions[this.currentState]?.[event];
    if (nextState) {
      this.currentState = nextState;
      console.log(`状态切换为: ${this.currentState} (通过事件: ${event})`);
    } else {
      console.warn(`不允许的转换: ${this.currentState} + ${event}`);
    }
  }

  getCurrentState() {
    return this.currentState;
  }
}

// 使用配置定义播放器 FSM
const playerFSM = new FiniteStateMachine({
  initial: 'idle',
  transitions: {
    idle:    { play: 'playing' },
    playing: { pause: 'paused', stop: 'idle' },
    paused:  { play: 'playing', stop: 'idle' }
  }
});

playerFSM.getCurrentState(); // 'idle'
playerFSM.transition('play'); // 状态切换为: playing
playerFSM.transition('pause'); // 状态切换为: paused

这种方式更轻量，适合简单状态流转，也易于序列化和调试。

基本上就这些。状态模式配合 FSM 能有效解耦复杂条件判断，提升代码可维护性。根据项目需求选择面向对象的状态类实现，还是配置化的 FSM，都能显著改善状态管理逻辑。不复杂但容易忽略的是状态完整性与非法转移的处理，建议在生产中加入校验和日志。

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

状态模式