0

0

javascript闭包如何实现状态机

畫卷琴夢

畫卷琴夢

发布时间:2025-08-01 08:57:02

|

695人浏览过

|

来源于php中文网

原创

利用闭包隐藏状态机内部状态的关键是将状态变量封装在函数内部,仅通过返回的接口暴露有限的操作。1. 闭包通过将状态变量(如currentstate或ison)定义在外部函数内,使其无法被外部直接访问;2. 返回一个包含方法的对象,这些方法可以读取或修改闭包内的状态,但外部无法绕过这些方法直接操作状态;3. 状态转换逻辑被封装在闭包内部函数中,确保状态变化只能通过预定义的接口进行,从而保障状态安全和行为可控;4. 结合状态转换表可提升灵活性,使状态与动作映射清晰且易于扩展;5. 对于异步操作,可在transition方法中使用async/await处理异步逻辑,并在动作完成后更新状态;6. 测试时应验证初始状态、状态转换、动作执行、异步处理及错误响应,确保状态机行为符合预期;该机制有效实现了状态的隔离与可控变更,提升了代码的封装性和可靠性。

javascript闭包如何实现状态机

JavaScript闭包实现状态机的关键在于利用闭包来封装状态和状态转换逻辑,从而在函数外部无法直接访问和修改状态,保证了状态机的内部状态安全和行为可控。

javascript闭包如何实现状态机

JavaScript闭包允许函数访问并操作其词法作用域之外的变量。状态机本质上是一组状态和状态之间的转换规则。利用闭包,我们可以将状态机的当前状态和状态转换函数封装在一个函数内部,形成一个闭包。这个闭包返回一个接口,允许外部触发状态转换,但不能直接修改状态。

function createStateMachine(initialState) {
  let currentState = initialState;

  function transition(newState) {
    currentState = newState;
    console.log(`State changed to: ${currentState}`);
  }

  return {
    getCurrentState: () => currentState,
    transition: transition
  };
}

const machine = createStateMachine('idle');
console.log(machine.getCurrentState()); // 输出: idle
machine.transition('running'); // 输出: State changed to: running
console.log(machine.getCurrentState()); // 输出: running

如何利用闭包隐藏状态机的内部状态?

立即学习Java免费学习笔记(深入)”;

javascript闭包如何实现状态机

状态机的核心在于状态的隔离和控制。闭包能够有效地将状态变量隐藏在函数内部,防止外部直接访问和修改。这意味着只有通过状态机提供的接口才能改变状态,从而保证了状态机的行为符合预期。

例如,考虑一个简单的灯的状态机,它有“开”、“关”两种状态。

javascript闭包如何实现状态机
function createLightSwitch() {
  let isOn = false;

  return {
    toggle: function() {
      isOn = !isOn;
      return isOn ? 'On' : 'Off';
    },
    isOn: function() { // 暴露一个只读接口,外部可以查询状态,但不能修改
      return isOn;
    }
  };
}

const light = createLightSwitch();
console.log(light.toggle()); // 输出: On
console.log(light.toggle()); // 输出: Off
console.log(light.isOn()); // 输出: false

在这个例子中,isOn变量被闭包保护起来,外部只能通过toggle方法改变状态,或者通过isOn方法读取状态。

状态转换函数如何设计才能更灵活?

状态转换函数的设计直接影响状态机的灵活性和可扩展性。一种常见的做法是使用一个状态转换表,将当前状态和触发事件映射到下一个状态和相应的动作。

艾绘
艾绘

艾绘:一站式绘本创作平台,AI智能绘本设计神器!

下载
function createStateMachineWithTable(initialState, transitionTable) {
  let currentState = initialState;

  return {
    getCurrentState: () => currentState,
    transition: (event) => {
      const transition = transitionTable[currentState] && transitionTable[currentState][event];
      if (transition) {
        currentState = transition.nextState;
        transition.action && transition.action(); // 执行与状态转换相关的动作
        console.log(`State changed to: ${currentState}`);
      } else {
        console.warn(`Invalid transition from ${currentState} with event ${event}`);
      }
    }
  };
}

// 状态转换表
const lightSwitchTable = {
  'off': {
    'toggle': { nextState: 'on', action: () => console.log('Turning on the light') }
  },
  'on': {
    'toggle': { nextState: 'off', action: () => console.log('Turning off the light') }
  }
};

const lightMachine = createStateMachineWithTable('off', lightSwitchTable);
lightMachine.transition('toggle'); // 输出: Turning on the light, State changed to: on
lightMachine.transition('toggle'); // 输出: Turning off the light, State changed to: off

使用状态转换表可以清晰地定义状态之间的关系,并且易于扩展和修改。每个状态转换可以关联一个动作函数,在状态转换时执行特定的操作。

如何处理状态机的异步操作?

在实际应用中,状态机经常需要处理异步操作,例如网络请求或定时器。这需要在状态转换函数中引入异步逻辑,并且正确处理异步操作的结果。

一种方法是在状态转换函数中使用Promise或async/await来处理异步操作。

function createStateMachineWithAsync(initialState, transitionTable) {
  let currentState = initialState;

  return {
    getCurrentState: () => currentState,
    transition: async (event) => { // 使用 async 函数
      const transition = transitionTable[currentState] && transitionTable[currentState][event];
      if (transition) {
        try {
          const result = await transition.action(); // 等待异步操作完成
          currentState = transition.nextState;
          console.log(`State changed to: ${currentState} after async action`);
          return result; // 返回异步操作的结果
        } catch (error) {
          console.error(`Error during async transition: ${error}`);
          // 可以选择切换到错误状态或者保持当前状态
        }
      } else {
        console.warn(`Invalid transition from ${currentState} with event ${event}`);
      }
    }
  };
}

const asyncLightSwitchTable = {
  'off': {
    'toggle': {
      nextState: 'pending',
      action: () => new Promise(resolve => {
        setTimeout(() => {
          console.log('Simulating turning on the light asynchronously');
          resolve('light_on');
        }, 1000);
      })
    }
  },
  'pending': {
    'resolve': { nextState: 'on' },
    'reject': { nextState: 'off' }
  },
  'on': {
    'toggle': {
      nextState: 'pending',
      action: () => new Promise(resolve => {
        setTimeout(() => {
          console.log('Simulating turning off the light asynchronously');
          resolve('light_off');
        }, 1000);
      })
    }
  }
};

const asyncLightMachine = createStateMachineWithAsync('off', asyncLightSwitchTable);
asyncLightMachine.transition('toggle').then(result => {
  console.log(`Transition completed with result: ${result}`);
});

在这个例子中,toggle事件触发一个异步操作,模拟打开或关闭灯。transition函数使用async/await来等待异步操作完成,然后切换到下一个状态。需要注意的是,异步操作可能会失败,因此需要进行错误处理。

如何测试使用闭包实现的状态机?

测试状态机需要验证状态转换是否正确,以及状态机的行为是否符合预期。可以使用单元测试框架(例如Jest或Mocha)来编写测试用例。

测试用例应该覆盖以下几个方面:

  • 初始状态是否正确。
  • 状态转换是否正确。
  • 状态转换时的动作是否正确执行。
  • 异步操作是否正确处理。
  • 错误处理是否正确。
// 示例 Jest 测试
describe('Light Switch State Machine', () => {
  it('should start in the off state', () => {
    const light = createLightSwitch();
    expect(light.isOn()).toBe(false);
  });

  it('should toggle the light on and off', () => {
    const light = createLightSwitch();
    expect(light.toggle()).toBe('On');
    expect(light.isOn()).toBe(true);
    expect(light.toggle()).toBe('Off');
    expect(light.isOn()).toBe(false);
  });
});

编写清晰、全面的测试用例可以帮助确保状态机的正确性和可靠性。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

1130

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

213

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1730

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

20

2026.01.19

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

137

2025.07.29

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

306

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

406

2023.10.12

css3transition
css3transition

css3transition属性用于指定如何从一个CSS样式过渡到另一个CSS样式,本专题为大家提供transition相关的文章、相关下载和相关课程,大家可以免费体验。

231

2023.06.27

clawdbot ai使用教程 保姆级clawdbot部署安装手册
clawdbot ai使用教程 保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

13

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 5万人学习

PostgreSQL 教程
PostgreSQL 教程

共48课时 | 8万人学习

NumPy 教程
NumPy 教程

共44课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号