toy-project: 자동차 경주 게임 (2)

Cannot read properties of undefined

다음과 같이 특정 property를 정상적으로 읽어오지 못하는 문제가 발생했다.

디버깅으로 확인해보니 renderStep() 메서드를 인자로 넘겨주고 실행시키는 과정에서 this값이 undefined로 되어있었다.

원인은 renderStep() 메서드를 호출하는 moveStep 코드블록내에서 해당 메서드를 일반 함수로 호출하면서 동적으로 this 값을 결정하기 때문이였다.

그렇다면 동적으로 this값이 정해지는 것을 방지해야하는데 이는 bind() 메서드를 활용하면 된다. bind() 메서드는 this키워드가 첫번째 인자로 제공된 값으로 설정된 새 함수를 반환하기 때문에 나중에 해당 함수를 호출하였을 때, this값이 설정된 this값으로 정의되어 아래와 같이 정상적으로 호출할 수 있게 된다.

this.game.start(
  Number(racingCount),
  this.resultView.renderStep.bind(this.resultView),
);