狀態模式的關鍵是區分事物內部的狀態，事物內部狀態的改變往往會帶來事物的行為改變。
> 當電燈開著，此時按下開關，電燈會切換到關閉狀態；再按一次開關，電燈又將被打開。同一個開關在不同的狀態下，表現出來的行為是不一樣的。
### 一、有限狀態機
- 狀態總數（state）是有限的。
- 任一時刻，只處在一種狀態之中。
- 某種條件下，會從一種狀態轉變（transition）到另一種狀態。
允許一個在其內部狀態改變時改變它的行為，對象看起來似乎修改了它的類。**
解釋：
（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);
}
~~~
函數聲明會被提升到普通變量之前。
請參考：[《JavaScript提升（你不知道的JavaScript）》](http://blog.csdn.net/ligang2585116/article/details/46271699)【示例5】
### 三、性能優化點
（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();
~~~
轉載請標明出處：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
