状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。
当电灯开着，此时按下开关，电灯会切换到关闭状态；再按一次开关，电灯又将被打开。同一个开关在不同的状态下，表现出来的行为是不一样的。
一、有限状态机
允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。
解释：
（1）将状态封装成独立的类，并将请求委托给当前的状态对象，当对象的内部状态发生改变时，会带来不同的行为变化。
（2）使用的对象，在不同的状态下具有截然不同的行为（委托效果）
谈到封装，一般优先考虑封装对象的行为，而不是对象的状态。
但在状态模式中刚好相反，状态模式的关键是把事物的每种状态都封装成单独的类。
二、示例
点灯程序 （弱光 > 强光 > 关灯）循环
// 关灯var OffLightState = function(light) { this.light = light;};// 弱光var OffLightState = function(light) { this.light = light;};// 强光var StrongLightState = function(light) { this.light = light;};var Light = function(){ /* 开关状态 */ this.offLight = new OffLightState(this); this.weakLight = new WeakLightState(this); this.strongLight = new StrongLightState(this); /* 快关按钮 */ this.button = null;};Light.prototype.init = function() { var button = document.createElement("button"), self = this; this.button = document.body.appendChild(button); this.button.innerHTML = '开关'; this.currentState = this.offLight; this.button.click = function() { self.currentState.buttonWasPressed(); }};// 让抽象父类的抽象方法直接抛出一个异常（避免状态子类未实现buttonWasPressed方法）Light.prototype.buttonWasPressed = function() { throw new Error("父类的buttonWasPressed方法必须被重写");};Light.prototype.setState = function(newState) { this.currentState = newState;};/* 关灯 */OffLightState.prototype = new Light(); // 继承抽象类OffLightState.prototype.buttonWasPressed = function() { console.log("关灯！"); this.light.setState(this.light.weakLight);}/* 弱光 */WeakLightState.prototype = new Light();WeakLightState.prototype.buttonWasPressed = function() { console.log("弱光！"); this.light.setState(this.light.strongLight);};/* 强光 */StrongLightState.prototype = new Light();StrongLightState.prototype.buttonWasPressed = function() { console.log("强光！"); this.light.setState(this.light.offLight);};PS：说明补充
必须把OffLightState、WeakLightState、StrongLightState构造函数提前。
new A("a");var A = function(a) { console.log(a)}new B("b");function B(b) { console.log(b);}函数声明会被提升到普通变量之前。
三、性能优化点
（1）如何管理状态对象的创建和销毁？
第一种仅当state对象被需要时才创建并随后销毁（state对象比较庞大，优先选择），
另一种是一开始就创建好所有的状态对象，并且始终不销毁它们（状态改变频繁）。
（2）利用享元模式共享一个state对象。
四、JavaScript版本的状态机
（1）通过Function.prototype.call方法直接把请求委托给某个字面量对象来执行
// 状态机var FSM = { off: { buttonWasPressed: function() { console.log("关灯"); this.button.innerHTML = "下一次按我是开灯"; // 这是Light上的属性！！！ this.currState = FSM.on; // 这是Light上的属性！！！ } }, on: { buttonWasPressed: function() { console.log("开灯"); this.button.innerHTML = "下一次按我是关灯"; this.currState = FSM.off; } },};var Light = function() { this.currState = FSM.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() { // 请求委托给FSM状态机 self.currState.buttonWasPressed.call(self); }}var light = new Light();light.init();（2）利用delegate函数
var delegate = function(client, delegation) { return { buttonWasPressed: function() { return delegation.buttonWasPressed.apply(client, arguments); } };};// 状态机var FSM = { off: { buttonWasPressed: function() { console.log("关灯"); this.button.innerHTML = "下一次按我是开灯"; this.currState = this.onState; } }, on: { buttonWasPressed: function() { console.log("开灯"); this.button.innerHTML = "下一次按我是关灯"; this.currState = this.offState; } },};var Light = function() { this.offState = delegate(this, FSM.off); this.onState = delegate(this, FSM.on); this.currState = this.offState; // 设置当前状态 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() { // 请求委托给FSM状态机 self.currState.buttonWasPressed(); }}var light = new Light();light.init();希望本文所述对大家学习javascript程序设计有所帮助。
新闻热点
疑难解答
