1. 簡介

狀態模式(State)允許一個對象在其內部狀態改變的時候改變它的行為，對象看起來似乎修改了它的類。
其實就是用一個對象或者數組記錄一組狀態，每個狀態對應一個實現，實現的時候根據狀態挨個去運行實現。

2. 實現

比如超級瑪麗，就可能同時有好幾個狀態比如 跳躍，移動，射擊，蹲下 等，如果對這些動作一個個進行處理判斷，需要多個if-else或者switch不僅丑陋不說，而且在遇到有組合動作的時候，實現就會變的更為復雜，這里可以使用狀態模式來實現。

狀態模式的思路是：首先創建一個狀態對象或者數組，內部保存狀態變量，然后內部封裝好每種動作對應的狀態，然后狀態對象返回一個接口對象，它可以對內部的狀態修改或者調用。

const SuperMarry = (function() { let _currentState = [], // 狀態數組states = {jump() {console.log('跳躍!')},move() {console.log('移動!')},shoot() {console.log('射擊!')},squat() {console.log('蹲下!')}}const Action = {changeState(arr) { // 更改當前動作_currentState = arrreturn this},goes() {console.log('觸發動作')_currentState.forEach(T => states[T] && states[T]())return this}}return {change: Action.changeState,go: Action.goes} })()SuperMarry.change(['jump', 'shoot']).go() // 觸發動作 跳躍! 射擊!.go() // 觸發動作 跳躍! 射擊!.change(['squat']).go() // 觸發動作 蹲下!

這里可以使用ES6的class優化一下：

class SuperMarry {constructor() {this._currentState = []this.states = {jump() {console.log('跳躍!')},move() {console.log('移動!')},shoot() {console.log('射擊!')},squat() {console.log('蹲下!')}}}change(arr) { // 更改當前動作this._currentState = arrreturn this}go() {console.log('觸發動作')this._currentState.forEach(T => this.states[T] && this.states[T]())return this} }new SuperMarry().change(['jump', 'shoot']).go() // 觸發動作 跳躍! 射擊!.go() // 觸發動作 跳躍! 射擊!.change(['squat']).go() // 觸發動作 蹲下!

3. 總結

狀態模式的使用場景也特別明確，有如下兩點：

一個對象的行為取決于它的狀態，并且它必須在運行時刻根據狀態改變它的行為。

一個操作中含有大量的分支語句，而且這些分支語句依賴于該對象的狀態。狀態通常為一個或多個枚舉常量的表示。

簡而言之，當遇到很多同級if-else或者switch的時候，可以使用狀態模式來進行簡化。

---

本文是系列文章，可以相互參考印證，共同進步~

JS 抽象工廠模式

JS 工廠模式

JS 建造者模式

JS 原型模式

JS 單例模式

JS 回調模式

JS 外觀模式

JS 適配器模式

JS 利用高階函數實現函數緩存(備忘模式)

JS 狀態模式

JS 橋接模式

JS 觀察者模式

網上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~

參考：
《Javascript 設計模式》 - 張榮銘
設計模式之狀態模式

總結

以上是生活随笔為你收集整理的JS 状态模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。