TIP

允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。

案例：电灯程序

有一个电灯，电灯上面只有一个开关。当电灯开着的时候，此时按下开关，电灯会切换到关闭状态; 再按一次开关，电灯又将被打开。同一个开关按钮，在不同 的状态下，表现出来的行为是不一样的

var Light = function () { 
  this.state = 'off'; // 给电灯设置初始状态 off
  this.button = null;// 电灯开关按钮
}

Light.prototype.init = function () {
  var button = document.createElement('button'),
  self = this;
  button.innerHTML = '开关'
  this.button = document.body.appendChild(button)
  this.button.onclick = function(){
    self.buttonWasPressed()
  }
}

Light.prototype.buttonWasPressed = function () { 
  if (this.state === 'off') {
    console.log('开灯');
    this.state = 'on';
  } else if (this.state === 'on'){
    console.log('关灯');
    this.state = 'off'; 
  }
};

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

以上代码存在以下问题：

• buttonWasPressed方法违反开放-封闭原则，每次新增或者修改light的状态，都需要改动buttonWasPressed方法中的代码
• 所有跟状态有关的行为，都被封装在buttonWasPressed方法里，如果以后这个电灯又增加了强强光、超强光和终极强光，我们将无法预测这个方法将膨胀到什么底部
• 状态的切换非常不明显，仅仅表现为对state变量的赋值，这样的操作很容易被程序员不小心漏掉
• buttonWasPressed方法里堆砌大量的if-else语句，使得它难以阅读和维护

状态模式重构

/******************** 定义 3 个状态类 ************************/
// OffLightState:
var OffLightState = function (light) { 
  this.light = light;
}

OffLightState.prototype.buttonWasPressed = function () { 
  console.log('弱光'); // offLightState 对应的行为 
  this.light.setState(this.light.weakLightState);// 切换状态到 weakLightState
};

// WeakLightState:
var WeakLightState = function (light){ 
  this.light = light;
}

WeakLightState.prototype.buttonWasPressed = function(){ 
  console.log('强光'); // weakLightState 对应的行为 
  this.light.setState(this.light.strongLightState); //切换状态到strongLightState
};

// StrongLightState:
var StrongLightState = function (light) { 
  this.light = light;
}

StrongLightState.prototype.buttonWasPressed = function () {
  console.log('关灯'); // strongLightState 对应的行为
  this.light.setState(this.light.offLightState); // 切换状态到 offLightState
}

/******************* 改写 Light 类，使用状态对象记录当前的状态 ******************/
var Light = function () {
  this.offLightState = new OffLightState(this); 
  this.weakLightState = new WeakLightState(this); 
  this.strongLightState = new StrongLightState(this); 
  this.button = null;
}

/******************** 提供一个 方法来切换 light 对象的状态 ************************/
Light.prototype.init = function () {
  var button = document.createElement('button'),
  self = this;
  this.button = document.body.appendChild(button); 
  this.button.innerHTML = '开关';
  this.currState = this.offLightState;
  this.button.onclick = function () { 
    self.currState.buttonWasPressed();
  } 
}

Light.prototype.setState = function(newState){
  this.currState = newState; 
};
var light = new Light(); 
light.init();

执行结果跟之前的代码一致，但是使用状态模式的好处很明显，它可以使每一种状态和它对应的行为之间的关系局部化，这些行为被分散和封装在各自对应的状态类之中，便于阅读和管理代码。 另外，状态之间的切换都被分布在状态类内部，这使得我们无需编写过多的 if、else 条件 分支语言来控制状态之间的转换。

状态模式的优缺点

优点：

• 状态模式定义了状态与行为之间的关系，并将它们封装在一个类里。通过增加新的状态 类，很容易增加新的状态和转换。
• 避免 Context 无限膨胀，状态切换的逻辑被分布在状态类中，也去掉了 Context 中原本过 5 多的条件分支。
• 用对象代替字符串来记录当前状态，使得状态的切换更加一目了然。
• Context 中的请求动作和状态类中封装的行为可以非常容易地独立变化而互不影响

缺点：状态模式会在系统中定义许多状态类，编写大量的状态类是一想枯燥乏味的工作，而且系统中会因此而增加不少对象

状态模式和策略模式的关系

状态模式和策略模式的相同点是，它们都有一个上下文，一些策略或者状态类，上下文把请求委托给这些类来执行。
它们之间的区别是策略模式中的各个策略类之间是平等又平行的，它们之间没有任何联系，所有客户必须熟知所有的策略类，以便客户可以随时主动切换算法。在状态模式中，状态和对应的行为是早已被封装好的，状态之间的切换也早被规定完成，“改变行为”这件事情发生在状态模式内部。