JavaScript 实现有限状态机（FSM）的完整示例

作者：小括号

时间：2026-10-31

本文介绍如何在 JavaScript 中实现有限状态机（FSM），通过定义 FiniteStateMachine 类管理状态、事件及动作。内容涵盖状态初始化、转换规则添加及结束状态检测，并提供完整的代码示例，帮助开发者在前端交互、游戏逻辑或表单验证等场景中有效管理复杂状态流转。

文章目录

有限状态机概述

有限状态机（Finite State Machine, FSM）是描述系统状态行为的数学模型，在前端开发中可用于管理复杂UI交互逻辑，例如游戏及表单验证场景。

JavaScript 实现代码

以下展示一个JavaScript实现有限状态机的示例：

class FiniteStateMachine {
  constructor() {
    this.handlers = {};
    this.startState = null;
    this.endStates = [];
    this.currentState = null;
  }
  // 设置初始状态
  setStartState(name) {
    this.startState = name;
    this.currentState = name;
  }
  // 添加状态转换处理器
  addHandler(state, event, newState, action) {
    if (!this.handlers[state]) {
      this.handlers[state] = {};
    }
    this.handlers[state][event] = { newState, action };
  }
  // 设置结束状态
  addEndState(state) {
    this.endStates.push(state);
  }
  // 处理事件，进行状态转换
  handleEvent(event) {
    if (this.currentState === null) {
      throw new Error('FiniteStateMachine has no start state.');
    }
    const handler = this.handlers[this.currentState][event];
    if (!handler) {
      throw new Error(`Cannot handle event ${event} in state ${this.currentState}.`);
    }
    // 执行状态转换前的动作
    if (handler.action) {
      handler.action();
    }
    // 进行状态转换
    this.currentState = handler.newState;
    // 检查是否到达结束状态
    if (this.endStates.includes(this.currentState)) {
      console.log('Reached an end state:', this.currentState);
    }
  }
}

状态机使用示例

使用示例：

// 创建一个有限状态机实例
const fsm = new FiniteStateMachine();
// 设置初始状态为 'state1'
fsm.setStartState('state1');
// 添加状态转换处理器和动作
fsm.addHandler('state1', 'event1', 'state2', () => console.log('Moving from state1 to state2'));
fsm.addHandler('state2', 'event2', 'state3', () => console.log('Moving from state2 to state3'));
fsm.addHandler('state3', 'event3', 'state1', () => console.log('Moving from state3 to state1'));
// 设置结束状态（可选）
fsm.addEndState('state3');
// 处理事件，进行状态转换
fsm.handleEvent('event1'); // 输出: Moving from state1 to state2
fsm.handleEvent('event2'); // 输出: Moving from state2 to state3
fsm.handleEvent('event3'); // 输出: Moving from state3 to state1 和 Reached an end state: state1