状态模式全解析--JavaScript

class Light{
    constructor(){
        this.state = ‘off‘;
        let button = document.createElement( ‘button‘ );
        button.innerHTML = ‘开关‘;
        this.button = document.body.appendChild( button );
        this.button.onclick = ()=>{
            this.buttonWasPressed();
        }
    }
    buttonWasPressed(){
        if ( this.state === ‘off‘ ){
            console.log( ‘开灯‘ );
            this.state = ‘on‘;
        }else if ( this.state === ‘on‘ ){
            console.log( ‘关灯‘ );
            this.state = ‘off‘;
        }
    }

}
new Light();

 1 class State{
 2     buttonWasPressed(){
 3         throw new Error( ‘父类的 buttonWasPressed 方法必须被重写‘ )
 4     }
 5 }
 6 
 7 class StrongLightState extends State{
 8     constructor(light){
 9         super();
10         this.light = light
11     }
12     // buttonWasPressed(){
13     //     console.log(‘-->关灯‘);
14     //     this.light.setState(this.light.offLightState)
15     // }
16 }
17 
18 class OffLightState  extends State{
19     constructor(light){
20         super();
21         this.light = light
22     }
23     buttonWasPressed(){
24         console.log(‘-->弱光‘);
25         this.light.setState(this.light.weakLightState)
26     }
27 }
28 
29 class WeakLightState  extends State{
30     constructor(light){
31         super();
32         this.light = light
33     }
34     buttonWasPressed(){
35         console.log(‘-->强光‘);
36         this.light.setState(this.light.strongLightState)
37     }
38 }
39 
40 class  Light{
41     constructor(){
42         this.strongLightState = new StrongLightState(this);
43         this.offLightState = new OffLightState(this);
44         this.weakLightState = new WeakLightState(this);
45         this.currState = this.offLightState; // 设置当前状态
46 
47         let button = document.createElement( ‘button‘ );
48         button.innerHTML = ‘开关‘;
49         this.button = document.body.appendChild( button );
50         this.button.onclick = ()=>{
51             this.currState.buttonWasPressed();
52         }
53     }
54 
55     setState(newState){
56         this.currState = newState
57     }
58 }