js状态模式是一种行为型设计模式，它的核心思想是当一个对象的内在状态发生改变时，允许其改变自身的行为，让这个对象看起来像是修改了所属的类。这种模式非常适合处理对象有多个状态，且不同状态下行为逻辑差异较大的场景，能够有效减少代码中的条件分支判断，提升代码的可读性和可维护性。
状态模式的核心组成
一个完整的js状态模式实现通常包含以下三个部分：
- 环境类（Context）：维护当前状态的实例，对外提供切换状态和触发行为的接口，是状态模式的使用入口。
- 抽象状态类（State）：定义所有具体状态需要实现的公共接口，规范不同状态下的行为方法。
- 具体状态类（ConcreteState）：继承或实现抽象状态类，封装对应状态下的具体行为逻辑。
js状态模式的简单实现示例
我们以电梯运行为例，电梯有停止、运行、故障三个状态，不同状态下对开门、关门、运行操作的响应不同，用状态模式实现如下：
// 抽象状态类
class LiftState {
constructor(lift) {
this.lift = lift; // 持有环境类实例的引用
}
// 开门操作
openDoor() {
throw new Error('该方法需要在具体状态类中实现');
}
// 关门操作
closeDoor() {
throw new Error('该方法需要在具体状态类中实现');
}
// 运行操作
run() {
throw new Error('该方法需要在具体状态类中实现');
}
}
// 停止状态的具体实现
class StopState extends LiftState {
openDoor() {
console.log('电梯停止状态，开门成功');
}
closeDoor() {
console.log('电梯停止状态，关门成功');
}
run() {
console.log('电梯停止状态，开始运行');
this.lift.setState(this.lift.runState); // 切换到运行状态
}
}
// 运行状态的具体实现
class RunState extends LiftState {
openDoor() {
console.log('电梯运行状态，无法开门');
}
closeDoor() {
console.log('电梯运行状态，门已关闭');
}
run() {
console.log('电梯已经在运行中');
}
}
// 故障状态的具体实现
class ErrorState extends LiftState {
openDoor() {
console.log('电梯故障状态，无法开门');
}
closeDoor() {
console.log('电梯故障状态，无法关门');
}
run() {
console.log('电梯故障状态，无法运行');
}
}
// 环境类：电梯
class Lift {
constructor() {
// 初始化所有状态实例
this.stopState = new StopState(this);
this.runState = new RunState(this);
this.errorState = new ErrorState(this);
this.currentState = this.stopState; // 默认初始状态为停止状态
}
// 设置当前状态
setState(state) {
this.currentState = state;
}
// 委托当前状态处理开门操作
openDoor() {
this.currentState.openDoor();
}
// 委托当前状态处理关门操作
closeDoor() {
this.currentState.closeDoor();
}
// 委托当前状态处理运行操作
run() {
this.currentState.run();
}
// 切换到故障状态的方法
setError() {
this.setState(this.errorState);
console.log('电梯出现故障');
}
}
// 测试代码
const myLift = new Lift();
myLift.openDoor(); // 输出：电梯停止状态，开门成功
myLift.run(); // 输出：电梯停止状态，开始运行
myLift.openDoor(); // 输出：电梯运行状态，无法开门
myLift.setError(); // 输出：电梯出现故障
myLift.run(); // 输出：电梯故障状态，无法运行
状态模式的优势与适用场景
状态模式的主要优势在于：
- 将不同状态的行为逻辑封装到独立的类中，避免了大量的
if-else或者switch-case条件判断，代码逻辑更清晰。 - 新增状态时只需要新增具体状态类，不需要修改环境类和其他状态类的代码，符合开闭原则，扩展性更好。
- 状态切换的逻辑被封装在状态类内部，环境类只需要关心状态的切换，不需要了解状态切换的具体细节，降低了代码耦合度。
它适合以下场景使用：
- 对象的行为依赖于它的状态，并且需要根据状态改变行为。
- 代码中包含大量与对象状态相关的条件判断语句，导致代码难以维护和扩展。
- 需要封装基于状态的行为，并且状态可以动态切换。
注意事项
使用状态模式时需要注意，如果对象的状态数量很少，且状态切换逻辑很简单，使用状态模式反而会增加代码复杂度，此时直接使用条件判断反而更合适。另外，具体状态类之间如果需要共享一些通用逻辑，可以在抽象状态类中实现默认方法，避免代码重复。
状态模式JavaScript设计模式状态切换修改时间：2026-07-22 16:24:55