• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

선생님 delegate함수를 사용하는 부분에 대해서 질문이 있습니다

21.10.20 18:57 작성 조회수 220

2

강의 너무 재밌고 흥미롭습니다 감사합니다 !!

제 질문은 아래와 같습니다.

delegate 함수를 호출할 때 아래 코드에서와 같이 화살표 함수를 콜백으로 넘겨주는데요,

// KeywordListView.js 
bindEvents() {
    delegate(this.element, "click", "li", (event) => this.handleClick(event));
  }

  handleClick(event) {
    const value = event.target.dataset.keyword;
    this.emit("@click", { value });
  }

// helper.js
export function delegate(target, eventName, selector, handler) {
  const emitEvent = (event) => {
    const potentialElements = qsAll(selector, target);

    for (const potentialElement of potentialElements) {
      if (potentialElement === event.target) {
        return handler.call(event.target, event);
      }
    }
  };

  on(target, eventName, emitEvent);
}

화살표 함수로 넘기는 이유는 handleClick 함수에 this를 바인딩 하지 않기 위해서인가요?

제가 이해한 의도는

helper의 delegate 함수에서 handler를 호출할 때 call을 이용해서 event.target을 this로 넘겨주는데,

handleClick에서는 KeywordListView 클래스가 상속받은 emit함수를 호출하기 위해서, this에 다른 것이 바인딩 되지 않도록 하기 위해 화살표 함수를 사용한 것으로 이해했습니다.

이게 선생님이 코드를 작성하신 의도가 맞는지 확인하고 싶어서 질문드립니다.

 

감사합니다!

답변 1

답변을 작성해보세요.

3

delegate 함수의 네 번재 인자로 this.handleClick을 직접 전달하지 않고 화살표 함수로 감싸서 전달한 이유가 궁금하신 거죠? 

만약 직접 전달하게 되면 이 함수는 이벤트가 발생할 때 호출될 텐데요. 그때 this.emit을 실행하려고 할 겁니다. 그 시점의 this는 이벤트 타겟 객체이기 때문에 emit 메소드가 없고 ReferenceError 예외를 던지게 될 거에요. 

이해하신대로 KeywordListView를 this로 유지하기 위해 렉시컬 스코프를 사용하는 화살표 함수를 전달했습니다. 

hellooguy님의 프로필

hellooguy

질문자

2021.10.28

감사합니다 !!!