JavaScript 디자인 패턴_javascript 기술의 상태 패턴을 알아보세요.

상태 모델의 핵심은 사물의 내부 상태를 구별하는 것입니다. 사물의 내부 상태 변화는 종종 사물의 행동 변화로 이어집니다.

조명이 켜져 있을 때 스위치를 누르면 조명이 꺼진 상태로 전환되고, 스위치를 다시 누르면 조명이 다시 켜집니다. 동일한 스위치는 상태에 따라 다르게 작동합니다.

1. 유한 상태 기계

• 스테이트(State)의 총 개수는 제한되어 있습니다.
• 어떤 순간에도 당신은 오직 하나의 상태에 있을 뿐입니다.
• 특정 조건에서는 한 상태에서 다른 상태로 전환이 발생합니다.
  

내부 상태가 변경될 때 개체의 동작을 변경하여 개체가 해당 클래스를 수정하는 것처럼 보이도록 합니다.
설명:
(1) 상태를 독립 클래스로 캡슐화하고 요청을 현재 상태 객체에 위임합니다. 객체의 내부 상태가 변경되면 다른 동작 변경이 발생합니다.
(2) 사용된 객체는 상태에 따라 완전히 다른 동작(위임 효과)을 갖습니다

캡슐화의 경우 일반적으로 객체의 상태보다는 객체의 동작을 캡슐화하는 것이 우선시됩니다.
그러나 상태 패턴에서는 그 반대입니다. 상태 패턴의 핵심은 사물의 각 상태를 별도의 클래스로 캡슐화하는 것입니다.

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);
}

함수 선언은 일반 변수보다 먼저 호이스팅됩니다.

3. 성능 최적화 포인트

(1) 상태 객체의 생성과 소멸을 어떻게 관리하나요?
첫 번째는 상태 객체가 필요할 때만 생성된 다음 소멸됩니다(상태 객체는 상대적으로 크므로 선호됨).
다른 하나는 처음에 모든 상태 객체를 생성하고 절대 파괴하지 않는 것입니다(상태는 자주 변경됩니다).
(2) 플라이웨이트 모드를 사용하여 상태 개체를 공유합니다.

4. 상태 머신의 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) 위임 기능 사용

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();

이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.