this 바인딩 선택

함수 모양보다 실행 위치를 먼저 본다

일반 함수는 호출 방식이 this를 정하고, 화살표 함수는 선언된 스코프의 this를 붙잡는다. TypeScript의 this 매개변수는 런타임 값을 만들지 않고 호출 컨텍스트만 타입으로 제한한다.

호출자가 바뀜

메서드를 변수로 빼면 this가 풀릴 수 있다.

인스턴스 유지

콜백 안에서 클래스 상태를 읽으면 화살표가 안전하다.

외부 API

라이브러리가 this를 넘기는 콜백은 일반 함수가 맞다.

타입 경계

this 타입을 쓰면 호출 컨텍스트 오류를 컴파일에서 잡는다.

일반 함수

호출 위치가 this를 결정한다.

객체 메서드, DOM 콜백, 라이브러리 콜백

함수를 따로 넘기면 this가 사라질 수 있다.

화살표 함수

선언 스코프의 this를 캡처한다.

비동기 콜백, 클래스 필드, 래퍼 함수

호출자가 제공하는 this는 받을 수 없다.

this 매개변수
fn(this: Logger, message: string)

함수가 요구하는 receiver 타입을 명시한다.

런타임 매개변수는 아니므로 JS 출력에는 남지 않는다.

bind

넘기기 전에 receiver를 고정한다.

기존 일반 함수를 콜백으로 전달할 때

바인딩 위치가 흩어지면 추적이 어려워진다.

01

receiver가 필요한가

객체 상태를 읽지 않으면 this 자체를 제거한다.

02

콜백으로 넘기는가

나중에 실행되면 화살표 함수나 bind를 검토한다.

03

호출자가 this를 주는가

라이브러리 콜백이면 일반 함수와 this 타입을 맞춘다.

04

타입으로 잠글 것인가

실수 여지가 있으면 this 매개변수를 첫 위치에 둔다.