출처 : 인프런 얄팍한 코딩사전
this
I. this - "이곳의~"
기본적으로 자신이 속한 곳을 가리킴 - 문맥 context
함수의 호출 방식에 따라 가리키는 바가 달라짐 - 자바스크립트 특성
- 전역에서의 this
아래의 환경들에서 각각 실행해 볼 것
브라우저의 콘솔창: Window 객체 - globalThis와 같음
Node.js의 REPL: global 객체 - globalThis와 같음
.js문서로 작성 후 실행 - 빈 객체
Node.js에서 각 .js 문서들은 이후 배울 모듈로서 실행되기 때문
- 함수 안에서의 this
느슨한 모드와 엄격 모드에서 다르게 동작
객체에 속하지 않은 함수에서는 this 사용이 의미 없음
- 객체 안에서의 this
일단 화살표 함수 제외
a. 객체 리터럴 - 해당 객체를 가리킴
b. 생성자 함수 - 생성될 인스턴스를 가리킴
c. 클래스 선언 - 생성될 인스턴스를 가리킴
동적 바인딩
자바스크립트의 독특한 동작방식
this가 가리키는 대상이 함수의 호출 주체 또는 그 방식에 따라 달라짐
함수가 누가, 어떻게 호출되었는가에 따라 this가 가리키는 대상이 달라짐
해결방법들
- call를 사용한 함수 호출 (this의 대상과 인자들을 나열
)
- apply를 사용한 함수 호출 (this의 대상 뒤의 인자들을 배열로
)
- bind를 사용한 this 대상 고정 (this의 대상이 동적으로 변하지 않는 함수를 반환
)
- 바인딩된 함수를 내보내는 함수
- 생성자 함수일 경우 - 함수 자체를 미리 인스턴스에 바인딩하기
call, apply, bind의 다른 활용
배열 메서드의 thisArg
콜백으로 주어진 함수 내에서 this가 가리킬 대상
보통 콜백함수 다음 인자로 넣음
this 의 정적 메서드
객체의 메서드 종류별 비교
로그로 출력된 형태 비교
생성자 역할 수행 여부
function 선언 함수만 생성자로 활용 가능 - 더 많은 기능이 있고 무겁다는 의미
화살표 함수와 this
function 함수나 메서드의 동적 바인딩과 다르게 동작
함수가 어디서 선언되었는가에 따름 - ⭐️ 가장 근접한 상위 스코프에 바인딩 고정
즉 this를 정적으로 바인딩함
- 객체 리터럴에서
- 생성자 함수와 클래스에서
기본적으로는 가리키는 대상이 동일 (해당 인스턴스)
동적으로 바인딩하는 타 방식과의 차이 확인
찌개는 function 선언 함수와 메서드로
볶음밥은 화살표 함수로
call, apply, bind의 this 인자 무시됨
