this는 자바스크립트에서 어떻게 동작할까?
this의 정의
this는 자바스크립트 런타임 시 바인딩이 이루어지는 실행 컨텍스트 중 하나로, 해당 함수가 실행되는 동안에 사용가능하며, 함수 호출 부분에서 this가 가리키는 것이 무엇인지를 확인할 수 있다.
복잡한 코드에서 암시적 바인딩에 의해 혼란스러운 경우가 있는데, 이를 해결하기 위해 call 또는 apply와 같은 내장 유틸리티를 사용하여 명시적으로 바인딩이 가능하다.
this는 함수가 호출되는 상황에 따라서 달라진다.
1. 일반 함수를 호출할 때
객체의 메서드가 아닌 함수를 호출하면 this는 전역 객체에 바인딩된다.
2. 객체의 메서드를 호출할 때
객체의 프로퍼티(값)이 함수일 경우를 메서드라고 한다.
메서드에서 this는 메서드를 포함하고 있는 객체를 참조한다. 해당 메서드를 호출한 객체가 바인딩된다.
3. 생성자 함수를 통해 객체를 생성할 때
new 연산자를 통해 생성자 함수를 호출하면 this는 객체 자신이 된다. this는 생성자 함수가 생성한 인스턴스를 가리킨다.
new 연산자를 사용하면 빈 object가 생성된다.
4. apply / call / bind를 통한 (간접)호출
apply : call과 비슷하지만 인수를 배열로 묶어 전달한다. (this로 사용할 객체를 전달하면서 함수 호출)
call : this를 바인딩하고 함수를 호출하고 실행시킨다. 호출할 함수의 인수를 쉽표로 구분한 리스트 형식으로 전달한다. (this로 사용할 객체를 전달하면서 함수 호출)
bind : 함수가 가리키는 this만 바꾸고, 호출하지 않는다. 메서드 내부의 중첩 함수나 콜백함수의 this가 불일치하는 문제를 해결할 때 유용하다. (함수를 호출하지 않고 this로 사용할 객체만 전달한다)
위치 별 this가 가리키는 곳
this는 때에 따라 다른 값을 가리킨다. 어떠한 문맥이냐에 따라서 값이 바뀐다.
전역 : 전역 객체 (window 객체)를 가리킨다.
일반 함수 내부 : 전역 객체 window (strict mode에서는 undefined)를 가리킨다.
객체에 속한 메서드 내부 : 메서드를 호출한 객체를 가리킨다.
객체에 속한 메서드 내부 함수에서 사용 : 전역 객체 (window 객체)를 가리킨다.
생성자 함수 내부 : 생성자 함수가 생성할 인스턴스 (새로운 객체)를 가리킨다.
정리
기본 바인딩: 전역 객체 (window)가 context 객체
암시적 바인딩: 어떤 객체를 통해 함수가 호출되면 그 객체가 this의 context 객체가 된다.
명시적 바인딩: 함수 객체는 call / bind / apply 메서드를 가지고 있는데, 첫 번째 인자로 넘겨주는 것이 this context가 된다.
new 바인딩: new로 객체를 생성
- call과 apply는 함수를 호출하는 함수이다. 첫 번째 인자에 this로 세팅하고 싶은 객체를 넘겨주어 this를 바꾸고 나서 실행된다.
- call은 첫 번째 인자를 제외하고 실제 함수 호출에 필요한 파라미터만 넣는다.
- apply는 두번재 인자부터 모두 배열에 넣어야한다.
- bind는 함수를 호출하지 않고, this로 사용할 객체만 전달한다.
화살표 함수는 this를 갖지 않기 때문에 바깥 스코프에서 this의 값을 계승 받는다.
참고
https://devowen.com/276
자바스크립트 Deep Dive
https://bohyeon-n.github.io/deploy/javascript/this.html
