5가지 규칙을 외워 줄줄이 읊을 수 있는지가 아니라, 한 호출 지점을 보고 "이 자리에서 `this`가 무엇이 될지"를 우선순위로 판정할 수 있는지 보려는 질문이다. 답에 따라 화살표 함수·bind·클래스 메서드 위임 같은 후속이 갈린다.
JavaScript의 this는 함수가 "어디에 선언됐는가"가 아니라 "어떻게 호출됐는가"로 결정된다. 일반 함수 호출은 strict 모드면 undefined, 그 외엔 전역 객체를 가리키고, 객체 메서드 호출은 점 앞의 객체, new는 새로 생성된 인스턴스, call·apply·bind는 명시한 객체를 바인딩한다. 화살표 함수는 자체 this를 갖지 않고 선언 시점의 상위 스코프 this를 그대로 빌려 쓰며, call·bind로도 바뀌지 않는다. 그래서 같은 함수라도 누가 어떤 식으로 호출했느냐에 따라 this가 매번 다르게 결정된다.
이벤트 핸들러에서 this가 undefined로 떨어진 버그를 잡은 경험이 있다면 어떤 호출이 바인딩을 풀었는지로 풀 수 있다
클래스 메서드를 일관되게 화살표 필드나 bind로 통일한 컨벤션을 잡아 본 적이 있다면 그 결정 기준을 정리할 수 있다
setTimeout·Promise 콜백 안에서 객체 메서드를 호출하다 this가 새 본 경험이 있다면 화살표·bind 선택 사례로 이어 쓸 수 있다
코드 리뷰에서 "이 줄의 this는 무엇인가"를 따라가 본 경험이 있다면 호출 지점 추적 사례로 연결하기 좋다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.