js状态模式是什么

28次阅读

状态模式通过 封装 对象 状态及其行为,使对象在内部状态改变时改变其行为,避免复杂条件判断。上下文(如 Light)持有当前状态,并将状态相关操作 委托 给具体状态对象处理;具体状态(如 OnState、OffState)实现各自行为逻辑并可切换状态。示例中灯的开关通过 press 方法触发不同行为,无需if/else 判断。优点包括消除条件逻辑、提升扩展性与职责清晰,适用于多状态场景如订单流程、按钮状态、游戏角色动作等,增强代码可维护性与灵活性。

js 状态模式是什么

js状态模式是一种设计模式,用来让一个对象在其内部状态改变时改变它的行为。换句话说,对象看起来像是修改了它的类。这种模式特别适用于一个对象的行为依赖于它的状态,并且状态越多、条件判断越复杂,使用状态模式就越能简化逻辑。

状态模式的核心思想

将对象中与特定状态相关的行为封装到独立的状态类或对象中,而不是用大量的条件语句(如 if/else 或 switch)来处理不同状态下的行为。这样可以让代码更清晰、更易于维护和扩展。

关键点包括:

  • 上下文(Context):持有当前状态的对象,对外提供 接口,把状态相关的行为委托给当前状态对象处理。
  • 状态接口 / 基类:定义状态共有的行为方法,各具体状态实现这些方法。
  • 具体状态(Concrete State):每个状态实现自己的行为逻辑,必要时可切换上下文的状态。

一个简单的例子

假设我们要实现一个灯的开关功能,灯有两种状态:开和关。使用状态模式可以避免在主对象中写 if 判断。

js 状态模式是什么

百灵大模型

蚂蚁集团自研的多模态 AI 大模型系列

js 状态模式是什么 177

查看详情 js 状态模式是什么

// 具体状态:关 const OffState = {press: function (light) {console.log('开灯');     light.setState(OnState);   } };  // 具体状态:开 const OnState = {press: function (light) {console.log('关灯');     light.setState(OffState);   } };  // 上下文:灯 function Light() {   this.state = OffState; // 初始状态为关}  Light.prototype.setState = function (state) {this.state = state;};  Light.prototype.press = function () {   this.state.press(this); // 委托给当前状态处理 };  // 使用示例 const light = new Light(); light.press(); // 开灯 light.press(); // 关灯 light.press(); // 开灯

状态模式的优点

使用状态模式的好处在于:

  • 消除复杂的条件判断:不再需要一长串 if/else 来判断状态。
  • 扩展性强:新增状态时只需添加新的状态对象,不用修改原有代码。
  • 职责清晰:每个状态的行为独立封装,便于理解和测试。

适用场景

当一个对象有多个状态,并且行为随状态变化而变化时,适合使用状态模式。常见场景包括:

  • 按钮的启用 / 禁用 / 加载状态
  • 订单的待支付、已支付、已发货、已完成等流程
  • 游戏中的角色状态(奔跑、跳跃、攻击)

基本上就这些。状态模式通过对象化状态,让代码更灵活,也更容易应对未来的变化。

站长
版权声明:本站原创文章,由 站长 2025-11-06发表,共计1323字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
1a44ec70fbfb7ca70432d56d3e5ef742
text=ZqhQzanResources