더북(TheBook)

#start-screensubmit 이벤트 리스너는 Game 클래스 밖에서 연결했는데, 왜 #game-menu#battle-menusubmit 이벤트 리스너는 Game 클래스 안에서 연결할까요? 이는 각각의 콜백 함수인 onGameMenuInput()onBattleMenuInput()Game 클래스의 메서드이기 때문입니다. addEventListener()Game 클래스 밖으로 뺀다고 생각해 보세요. Game 클래스 밖에서 thiswindow가 되니 문제가 생기겠죠?

또 한 가지 특이한 점은 onGameMenuInput()onBattleMenuInput()만 화살표 함수로 되어 있다는 점입니다. 이것은 this와 콜백 함수의 특성과 관련이 있습니다. 두 콜백 함수가 함수 선언문이라면 thisaddEventListener()에 의해 각각 $gameMenu$battleMenu로 바뀝니다. 이를 막으려면 화살표 함수를 사용해 기존 this(Game 객체)를 유지해야 합니다. 따라서 앞의 코드에서는 기존 this(Game 객체)를 유지해 onGameMenuInput() 메서드 안에서도 thisGame 객체가 됩니다.

모든 콜백 함수의 this가 다른 값으로 바뀌는 것이 아닙니다. 따라서 this를 바꾸는 함수나 메서드를 볼 때마다 따로 외우고 있어야 합니다(2.7.2 this 이해하기 참고).

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.