JS设计模式之状态模式

# 什么是“状态模式”？

状态模式：对象行为是根据状态改变，而改变的。
特点：正是由于内部状态的变化，导致对外的行为发生了变化。例如：相同的方法在不同时刻被调用，行为可能会有差异。
何时使用：代码中包含大量与对象状态有关的条件语句。
如何解决：将各种具体的状态类抽象出来。

# 优缺点

优点：

• 封装了转化规则，对于大量分支语句，可以考虑使用状态类进一步封装。
• 每个状态都是确定的，对象行为是可控的。

缺点：状态模式的实现关键是将事物的状态都封装成单独的类，状态模式的使用必然会增加系统类和对象的个数。 这个类的各种方法就是“此种状态对应的表现行为”。因此，程序开销会增大。

使用场景

1、行为随状态改变而改变的场景。
2、条件、分支语句的代替者。

1、状态模式实现手电筒关灯、强光、弱光三种状态的切换

      const obj = {
            weakLight: {
                press() {
                    console.log('打开强光');
                    this.currState = obj.strongLight;
                }
            },
            strongLight: {
                press() {
                    console.log('关灯');
                    this.currState = obj.offLight;
                }
            },
            offLight: {
                press() {
                    console.log('打开弱光');
                    this.currState = obj.weakLight;
                }
            }
        }

        const Light = function() {
            this.currState = obj.offLight;
        }

        const btn = (() => {
            const btn = document.createElement('button');
            btn.innerHTML = 'Press Me';
            document.body.appendChild(btn);
            return btn;
        })()

        Light.prototype.handlePress = function() {
            let self = this;
            btn.addEventListener('click', function() {
                self.currState.press.call(self);
            }, false)
        }

        const light = new Light();
        light.handlePress();

obj为一个状态对象，保存了三种状态模式的操作及具体实现，当触发对应的操作时，立即将当前状态切换为下一个，实现有限状态机这样一种模式，handlePress就是常说的状态类，它的行为随着状态的改变而改变。
下面是ES6的 简单实现

       const obj = {
            weakLight: {
                press() {
                    console.log('打开强光');
                    this.currState = obj.strongLight;
                }
            },
            strongLight: {
                press() {
                    console.log('关灯');
                    this.currState = obj.offLight;
                }
            },
            offLight: {
                press() {
                    console.log('打开弱光');
                    this.currState = obj.weakLight;
                }
            }
        }

        const btn = (() => {
            const btn = document.createElement('button');
            btn.innerHTML = 'Press Me';
            document.body.appendChild(btn);
            return btn;
        })()

        class Light {
            constructor(obj) {
                this.currState = obj.offLight;
            }

            handlePress() {
                this.currState.press.call(this);
            }
        }

        const light = new Light(obj);
        btn.addEventListener('click', () => {
            light.handlePress();
        }, false)