1. This란 뭐냐 대체
'this는 어떻게 정의되었느냐가 아니라
어떻게(how) 호출되었느냐에 따라 결정된다.'
JS에서 this는 호출한 존재가 누구인가라는 뜻이다.
일반적으로 Browser-side에서는 window,
Server-side(Node.js)에서는 global 객체를 의미한다.
자세한 것은 예시를 들며 설명하겠다.
1.1 기본 this 호출
window가 출력되는 것을 볼 수 있다.
window 객체는 브라우저 탭에 존재하는 자바스크립트 전역 최상위 객체이다. 따라서 window로 어디서든 접근이 가능하다
window 객체 안에는 document 객체가 존재하고,
document에는 잠재적으로 보여질 수 있는 dom에 대한 정보가
저장되어 있다. document객체는 window.document
혹은 document로 접근이 가능하다.
(간단하게 window에 대해 여기까지만 설명!)
1.2 일반 함수의 this 호출
전역함수는 물론이고 심지어 내부함수의 경우도 this는
외부함수가 아닌 전역객체에 바인딩된다.
✔ 바인딩이란?
- 메서드와 객체를 묶어놓는 것
하지만 예외가 존재하는데, strict mode에선
undefined가 출력된다.
(아래는 strict mode를 적용한 예시)
혹시나 함수 안에서 선언한 것과 밖에서 선언한 것이
차이가 있을까 했지만 결과는 같았다.
3. 객체 method의 this 호출
객체 메서드로 접근하는 경우의 예시를 들었을 때,
함수를 직접 호출한 부분에서 undefined가 발생했다.
아무리 생각해봐도 오류를 낼 만한 부분이 없는데..
이리저리 시도하다 알아낸 것은 'this도 변수에 영향을 받는다는 것'이다.
(const도 let과 마찬가지로 undefined가 발생한다.)
- home 객체의 메서드로 호출된 경우( =home.iWantPizza( ) )
this는 호출한 객체를 가리킨다.
그렇기 때문에 이번 this는 home이 된다.
- 함수를 직접 호출
iWantPizza( )는 전역에서 독립적으로 실행되어
이번 this는 window를 가리켰다.
(window -> document( = html) -> var food = 마라탕)
- 변수에 객체 데이터를 담아 this를 호출한 경우
이번 this는 어찌된 일인지 전역 실행으로 window를 가리킨다.
객체의 데이터가 담겨 예제의 닭가슴살이 나올 줄 알았는데
의외로 마라탕이 나와서 좀..당황스럽다.
4. 생성자 함수로 this 호출(ES6 ver.)
ES6의 JS에서 생성자 내의 this는 생성한 인스턴스를 가리킵니다.(설명에 실수가 있을 수 있습니다. 피드백 주시면 감사하겠습니다!)
아직 class라는 개념을 공부하지 않아 정확히 설명하진 못하지만
어떤 흐름으로 가는 지는 감은 왔다.
변수 newTank에 koreaTank라는 클래스의 데이터를 공유하는 느낌.
위에서 설명한 '내부함수는 전역객체에 바인딩'된다는 것이
통하지 않는다는 것을 알았다.
정리
- 기본적으로 this는 전역 객체(브라우저에서 window)를 참조한다. (예외: 'use strict')
- 일반 함수 또는 내부함수의 this는 전역 객체를 참조한다.
- 객체 메서드에서 this는 해당 메서드를 호출한 객체를 참조한다.
- 생성자 함수 내부의 this는 생성된 객체를 참조한다.
마치며
this를 공부하며 느낀 것은 이해하기보단
사용되는 케이스를 암기해야 한다는 것이다.
this라는 개념 하나를 공부하면서 가장 오랜 시간을 소비했다.
그럼에도 내가 모르는 무언가를 알았다는 점이 참 기분 좋다.
Reference
PoiemaWeb
this의 모든 것
MDN
