about Binding

  constructor(carrotCount, bunCount) {
    this.field.addEventListener("click", this.onClick);
  }
  
  onClick(event) {
    const target = event.target;
    if (target.matches(".carrot")) {
      target.remove();
      sound.playCarrot()
      this.onItemClick && this.onItemClick("carrot");
    } else if (target.matches(".bug")) {
      this.onItemClick && this.onItemClick("bug");
    }
  }
  
  

위 코드를 통해 봤을떄 일반적인경우라면 상단 setClickListener 함수에 전달된 onItemClick에 onClick의 클래스가 상속되야 하는 것이 일반적이나, 자바스크립트에서는 상속되지 못해 callback함수가 실행되지 못하는 문제가 발생한다.
그런때에 이문제를 해결하기 위해 this binding을 한다.
그 반인딩에는 3가지 방법이 있는데
1. this정의
this.onClick = this.onClick.bind(this)

2. 전달받는 쪽의 바인딩
하지만 위 방법은 사용할떄마다 작성해야하는 불편함이 있어 화살표 함수를 사용하여 바인딩된 값을 전달 할 수있다.
this.field.addEventListener("click", (event) => this.onClick(event));

3. 전달하는 쪽의 바인딩
위 방법을 활용하여 전달하는 쪽을 수정하는 방법으로도 많이 사용한다.

onClick = event => {
    const target = event.target;
    if (target.matches(".carrot")) {
      target.remove();
      sound.playCarrot()
      this.onItemClick && this.onItemClick("carrot");
    } else if (target.matches(".bug")) {
      this.onItemClick && this.onItemClick("bug");
    }
  }