介绍

  • 有状态变化
  • 状态较多，逻辑复杂

示例

  • 红绿灯：不同颜色的变化
  • 开关

UML类图

点击查看【processon】

代码

  1. // 状态 红灯/绿灯/黄灯
  2. class State {
  3.   constructor(color) {
  4.     this.color = color
  5.   }
  7.   handle(context) {
  8.     console.log(`turn to ${this.color} light`);
  9.     context.setState(this)
  10.   }
  11. }
  13. // 主体
  14. class Context {
  15.   constructor() {
  16.     this.state = null
  17.   }
  19.   getState() {
  20.     return this.state
  21.   }
  23.   setState(state) {
  24.     this.state = state
  25.   }
  26. }
  28. const context = new Context()
  29. const red = new State('red')
  30. const blue = new State('blue')
  31. const yellow = new State('yellow')
  33. red.handle(context)
  34. yellow.handle(context)
  35. blue.handle(context)
  36. console.log(context.getState())

场景