JavaScript-状态模式

状态模式

在状态模式（State Pattern）中，类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。
在状态模式中，我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。

何时使用：代码中包含大量与对象状态有关的条件语句。

如何解决：将各种具体的状态类抽象出来。

// JavaScript版本的状态机
// Light相当于环境类
// currState保存状态对象
class Light {
  constructor() {
    this.currState = FSM.off;
    this.button = null;
  }
  init() {
    const button = document.createElement("button");
    self = this;
    button.innerHTML = "已关灯";
    this.button = document.body.appendChild(button);
    this.button.onclick = function () {
      self.currState.buttonWasPressed.call(self);
    };
  }
}

// FSM是状态对象的集合,拥有相同的方法,并且在该方法中切换了环境类的当前状态
const FSM = {
  off: {
    buttonWasPressed() {
      console.log("关灯");
      this.button.innerHTML = "下一次按我是开灯";
      this.currState = FSM.on;
    },
  },
  on: {
    buttonWasPressed() {
      console.log("开灯");
      this.button.innerHTML = "下一次按我是关灯";
      this.currState = FSM.off;
    },
  },
};

const light = new Light();
light.init();