允許一個對象在其內(nèi)部狀態(tài)改變時改變它的行為，對象看起來似乎修改了它的類。
解釋：
（1）將狀態(tài)封裝成獨立的類，并將請求委托給當(dāng)前的狀態(tài)對象，當(dāng)對象的內(nèi)部狀態(tài)發(fā)生改變時，會帶來不同的行為變化。
（2）使用的對象，在不同的狀態(tài)下具有截然不同的行為（委托效果）

談到封裝，一般優(yōu)先考慮封裝對象的行為，而不是對象的狀態(tài)。
但在狀態(tài)模式中剛好相反，狀態(tài)模式的關(guān)鍵是把事物的每種狀態(tài)都封裝成單獨的類。

二、示例

點燈程序（弱光 –> 強光 –> 關(guān)燈）循環(huán)

// 關(guān)燈
var OffLightState = function(light) {
  this.light = light;
};
// 弱光
var OffLightState = function(light) {
  this.light = light;
};
// 強光
var StrongLightState = function(light) {
  this.light = light;
};

var Light = function(){
  /* 開關(guān)狀態(tài) */
  this.offLight = new OffLightState(this);
  this.weakLight = new WeakLightState(this);
  this.strongLight = new StrongLightState(this);
  /* 快關(guān)按鈕 */
  this.button = null;
};
Light.prototype.init = function() {
  var button = document.createElement("button"),
    self = this;
  this.button = document.body.appendChild(button);
  this.button.innerHTML = '開關(guān)';
  this.currentState = this.offLight;
  this.button.click = function() {
    self.currentState.buttonWasPressed();
  }
};
// 讓抽象父類的抽象方法直接拋出一個異常（避免狀態(tài)子類未實現(xiàn)buttonWasPressed方法）
Light.prototype.buttonWasPressed = function() {
  throw new Error("父類的buttonWasPressed方法必須被重寫");
};
Light.prototype.setState = function(newState) {
  this.currentState = newState;
};

/* 關(guān)燈 */
OffLightState.prototype = new Light(); // 繼承抽象類
OffLightState.prototype.buttonWasPressed = function() {
  console.log("關(guān)燈！");
  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構(gòu)造函數(shù)提前。

new A("a");
var A = function(a) {
  console.log(a)
}

new B("b");
function B(b) {
  console.log(b);
}

函數(shù)聲明會被提升到普通變量之前。

三、性能優(yōu)化點

（1）如何管理狀態(tài)對象的創(chuàng)建和銷毀？
第一種僅當(dāng)state對象被需要時才創(chuàng)建并隨后銷毀（state對象比較龐大，優(yōu)先選擇），
另一種是一開始就創(chuàng)建好所有的狀態(tài)對象，并且始終不銷毀它們（狀態(tài)改變頻繁）。
（2）利用享元模式共享一個state對象。

四、JavaScript版本的狀態(tài)機

（1）通過Function.prototype.call方法直接把請求委托給某個字面量對象來執(zhí)行

// 狀態(tài)機
var FSM = {
  off: {
    buttonWasPressed: function() {
      console.log("關(guān)燈");
      this.button.innerHTML = "下一次按我是開燈";   // 這是Light上的屬性?。?！
      this.currState = FSM.on;            // 這是Light上的屬性?。?！
    }
  },
  on: {
    buttonWasPressed: function() {
      console.log("開燈");
      this.button.innerHTML = "下一次按我是關(guān)燈";
      this.currState = FSM.off;
    }
  },
};

var Light = function() {
  this.currState = FSM.off;  // 設(shè)置當(dāng)前狀態(tài)
  this.button = null;
};

Light.prototype.init = function() {
  var button = document.createElement("button");
  self = this;

  button.innerHTML = "已關(guān)燈";
  this.button = document.body.appendChild(button);
  this.button.onclick = function() {
    // 請求委托給FSM狀態(tài)機
    self.currState.buttonWasPressed.call(self);
  }

}

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

（2）利用delegate函數(shù)

var delegate = function(client, delegation) {
  return {
    buttonWasPressed: function() {
      return delegation.buttonWasPressed.apply(client, arguments);
    }
  };
};

// 狀態(tài)機
var FSM = {
  off: {
    buttonWasPressed: function() {
      console.log("關(guān)燈");
      this.button.innerHTML = "下一次按我是開燈";
      this.currState = this.onState;
    }
  },
  on: {
    buttonWasPressed: function() {
      console.log("開燈");
      this.button.innerHTML = "下一次按我是關(guān)燈";
      this.currState = this.offState;
    }
  },
};

var Light = function() {
  this.offState = delegate(this, FSM.off);
  this.onState = delegate(this, FSM.on);
  this.currState = this.offState; // 設(shè)置當(dāng)前狀態(tài)
  this.button = null;
};

Light.prototype.init = function() {
  var button = document.createElement("button");
  self = this;

  button.innerHTML = "已關(guān)燈";
  this.button = document.body.appendChild(button);
  this.button.onclick = function() {
    // 請求委托給FSM狀態(tài)機
    self.currState.buttonWasPressed();
  }
}

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

希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

您可能感興趣的文章: