函数式状态机将状态定义为纯函数，通过返回新函数实现状态转移。例如灯开关示例中，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'); // 关灯
这里没有类、没有变量保存状态，状态本身由函数引用表示，转移通过返回新函数完成。
结合数据上下文增强灵活性
实际应用中，状态可能依赖外部数据。可以通过传入上下文对象让状态函数访问必要信息，同时保持函数式风格。
MDWechat微信主题模块
MDWechat是一款xposed插件,能够使使微信Material Design化。功能实现的功能有:1.主界面 TabLayout Material 化,支持自定义图标2.主界面 4 个页面背景修改3.全局 ActionBar 和 状态栏 颜色修改,支持主界面和聊天页面的沉浸主题(4.0新增)4.自动识别微信深色模式以调整MDwechat配色方案(3.6新增)5.主界面添加悬浮按钮(Float
0 查看详情
比如一个订单状态机：
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），但理解函数式实现有助于掌握其设计思想。
基本上就这些，不复杂但容易忽略细节。关键在于把状态看作一等公民，用函数表达行为和转移。
以上就是函数式状态机_JavaScript状态模式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/866088.html
微信扫一扫 
支付宝扫一扫 
