구현

• 같은 클래스 메서드인데 어떤건 this가 본인 객체이고, 어떤건 window인 이슈

addEventListener("keydown",this.keyPressHandler.bind(this));

handler로 들어가는 함수의 this는 window.

• handler 함수를 밖으로 뺌
  그렇다면 객체를 어떤 식으로 전달해주어야할까????

  constructor() {
    this.wrongContainer = document.querySelector("#wrong-letters");
    this.wordContainer = document.querySelector("#word");
    this.hangman = document.querySelectorAll(".figure-part");
    this.popup = document.querySelector(".popup-container");
    this.notification = document.querySelector("#notification-container");
    this.playBtn = document.querySelector("#play-button");
    // bind 메소드 이용
    this.handler = keyPressHandler.bind(this);
  }

keyPressHandler함수를 bind 메소드를 통해 새로운 함수로 만들어 Game.handler 변수에 담는다.

이렇게 되면

   addEventListener("keydown", this.handler);

다음과 같이 이벤트를 걸어주었을 때, handler함수 내에서 현재 객체에 접근할 수 있다.

• handler로 사용할 함수에 this 바인딩 하기

this.playBtn.addEventListener("click",this.gameStart.bind(this));

배운점

• 문자열을 배열로 만들기 : "1234".split()
• apply, call, bind

//<----apply this가 바인드된 함수를 실행한다. apply(this,[args])----->//
function a(){
console.log(this) // a function
}

a.apply(a)

//<----call this가 바인드된 함수를 실행한다. call(this,arg1,arg2)----->//
function a(){
console.log(this) // a function
}

a.call(a)

//<----bind : 새로운 함수를 리턴한다. bind(this,arg1,arg2)----->//
function a(){
console.log(this) // a function
}

b = a.bind(a)
b();

• function.변수
  다음과 같이 함수이름.변수를 선언한 후 ( 초기화 한 후 ) 값을 넣으면

const correctKeyHandler = (key) => {
    if (!correctKeyHandler.count) {
      correctKeyHandler.count = 0;
    }
    correctKeyMemorizer.push(key);
    word.forEach((spel, index) => {
      if (spel === key) {
        wordContainer.childNodes.item(index).textContent = key;
        correctKeyHandler.count++;
      }
    });
  };

다른 함수에서도 함수의 변수에 접근이 가능하다.

if (word.includes(key)) {
          correctKeyHandler(key);
          if (correctKeyHandler.count === word.length) {
            showPopup();
          }
        }

• 자바스크립트로 style 적용하기

      this.correctWord.style =
        "border-bottom:1px solid #fff; width:1em; margin-right:10px; text-align:center";

Reference

• vscode 명령어
• apply bind call
• 함수의 변수