函数式状态机将状态定义为纯函数，通过返回新函数实现状态转移。例如灯开关示例中，offstate与onstate根据输入事件切换状态，无需类或实例，仅靠函数引用传递；订单状态机则通过createordermachine接收上下文，各状态函数闭包捕获数据，在保持不可变性的同时完成逻辑流转。该模式适用于表单、ui交互等场景，优势在于无副作用、易测试、与函数式框架契合，适合中小型状态管理，复杂场景可结合xstate等库。核心是将状态作为一等公民，用函数表达行为与转换。
状态模式在JavaScript中可以用函数式的方式实现，既保持了状态机的清晰结构，又避免了类和实例带来的复杂性。核心思路是把每个状态定义为一个纯函数，状态之间的切换通过返回新的状态函数完成。
什么是函数式状态机
函数式状态机将状态表示为函数，每个状态函数接收事件或输入，根据规则决定是否转移到下一个状态，并执行对应的行为。与面向对象的状态模式不同，它不依赖this或实例属性，而是通过闭包或函数返回值管理状态流转。
这种方式适合处理表单流程、UI交互、游戏角色行为等需要明确状态边界和转换逻辑的场景。
用纯函数实现状态流转
每个状态是一个函数，接受当前上下文（如数据或事件），返回下一个状态函数。整个状态机通过递归调用维持运行。
立即学习“Java免费学习笔记（深入）”；
例如，一个简单的灯开关状态机：
const offState = (input) => {
if (input === 'toggle') {
console.log('开灯');
return onState;
}
return offState;
};
const onState = (input) => {
if (input === 'toggle') {
console.log('关灯');
return offState;
}
return onState;
};
// 初始状态
let currentState = offState;
// 模拟事件触发
currentState = currentState('toggle'); // 开灯
currentState = currentState('toggle'); // 关灯
这里没有类、没有变量保存状态，状态本身由函数引用表示，转移通过返回新函数完成。
结合数据上下文增强灵活性
实际应用中，状态可能依赖外部数据。可以通过传入上下文对象让状态函数访问必要信息，同时保持函数式风格。
比如一个订单状态机：
const createOrderMachine = (context) => {
const pending = (event) => {
if (event.type === 'PAY') {
console.log('支付成功');
context.lastUpdate = Date.now();
return shipped(context);
}
return pending;
};
const shipped = (ctx) => (event) => {
if (event.type === 'DELIVER') {
console.log('已送达');
ctx.status = 'delivered';
return delivered(ctx);
}
return shipped(ctx);
};
const delivered = () => () => {
console.log('订单已完成，不可变更');
return delivered;
};
return { state: pending, context };
};
使用方式：
const order = createOrderMachine({ status: 'pending' });
let machine = order.state;
machine = machine({ type: 'PAY' }); // 支付成功
machine = machine({ type: 'DELIVER' }); // 已送达
状态函数可以捕获上下文，行为更灵活，同时避免了可变状态污染。
优点与适用场景
函数式状态机天然适合不可变数据流，易于测试和推理。每个状态函数只关注输入和输出，没有副作用。
- 适合小型到中型状态逻辑，比如按钮状态、页面流程控制
- 与React等函数式UI框架配合良好
- 便于序列化和调试，状态即函数引用
对于复杂状态机，可引入有限状态机库（如xstate），但理解函数式实现有助于掌握其设计思想。
基本上就这些，不复杂但容易忽略细节。关键在于把状态看作一等公民，用函数表达行为和转移。
