개요
javascript에서 this에 대한 내용을 다룬 포스트입니다.
예제
내용
react에서 class component를 사용할 때나, vue를 사용할 때에는 javascipt의 this를 사용했습니다. 하지만 현재 next를 사용하면서 this를 사용한지가 오래되었습니다. 핑계가 길었지만, 결론적으로 솔직히 저는 this를 잘 모릅니다.(그게 자랑이니..?🤬)
this는 무엇인가?
모를 때에는 일단 쳐보는 성향입니다. javascript 언어를 test할 때 주로 사용하는 RunJS, JS Bin에 한번 this를 출력해보았습니다. 위 이미지처럼 2곳 모두 Window라는 객체를 출력하였습니다.
window 객체는 무엇인가?
window라는 영어의 우리나라 말은 바로 창 입니다. 바로 browser창이 window객체입니다. browser 관련 객체인 BOM(browser object model)에는 몇가지 객체가 있는데 그 중 가장 최상위 객체가 바로 window 객체 입니다.
위 이미지 처럼 browser 창에 모든 것을 가지고 있는 window객체가 보이고, url 주소창은 location 객체이며, 개발자들이 작성한 code가 보이는 곳이 바로 document객체인 것을 알 수 있습니다. 그렇다면 this는 window객체를 출력하고 있으니까 뭔가 자신이 속해져있는 최상위 객체를 출력한다라고 이해가 됩니다.
책에서 잠깐 봤던 this의 정의가 조금은 이해가 갑니다.
- this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.
- this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
그러고보니 사용한지 좀 오래되어서 맞는지는 모르겠지만 vue를 사용할 때에도 자신의 component에 속해져 있는 method 혹은 data값을 가져올 때 this를 사용해서 접근했던 것 같습니다.
this === window?
위에서 제가 말씀드린 것 처럼 vue에서는 자신의 component안에 있던 method 혹은 data값을 가져올 때 this를 쓴 것 같은데... 그게 window객체에 들어간 걸까요?
포스트의 시작 부분에서 RunJS와 JS Bin에서 this를 출력하였을 때, window객체가 출력되었으니, this는 곧 window인가에 대한 물음이 생겼습니다.
즉, this === window가 매번 맞는지가 궁금해졌습니다.
google, velog에서 javascript this에 대해서 검색한 결과, 우선this === window가 매번 맞지는 않습니다. 왜냐하면 this는 동적 binding이 되기 때문입니다.
즉, javascript의 this는 바라보는 값이 변할 수 있기 때문에 JS Bin, RunJs에서 this를 출력하면 window가 나왔지만, 다른 상황에서는 window가 나오지 않습니다.
window | object | undefined
google, velog에서 this를 검색한 결과 친절한 문서들이 많았습니다. 아마 이 글을 보시는 여러분들도 javascript에서 this가 동적 binding되는 case들을 보셨을 겁니다. 아래처럼요.
1. 전역 문맥에서의 this
2. 함수 내부에서의 this
3. method 안에서의 this
4. event hanlder 안에서의 this
5. 명시적 binding의 this
6. 화살표 함수에서의 this
7. 일반 함수에서의 this
8. 생성자에서의 this
...(더 있지 않을까 싶지만 여기까지 case를 나열하겠습니다...🤯)this가 동적으로 biniding되는 걸 알겠지만, 그 case를 하나 하나 나열하는 것이 과연 this를 이해하는데 도움이 될까 싶습니다. 하지만 대부분 사람들의 포스트는 case를 하나 하나 나열했더군요. (그게 더 헷갈리는데😢... 나만 이상해씨 🐸)
case가 아닌 결과론적으로 어쩔때 this가 window, object, undefined가 나오는지 정리를 해보겠습니다.
window | object
- 함수 문맥 > 일반 함수
- 함수 문맥 > 화살표 함수
- 함수 문맥 > 객체 method > 일반 함수
- 함수 문맥 > inline event
- 함수 문맥 > call(), apply()
- 함수 문맥 > bind()
window
object
undefined
위 4가지로 나눈 내용들은 MDN에서 설명하고있는 this가 동적으로 binding되는 case들을 정리해보았습니다. 정확하게 window, object, undefined로 떨어지는 경우보다는, window 혹은 특정 object로 반환되는 케이스를 중점으로 깊게 확인하면 좋을 것 같습니다.
이 포스트에서는 따로 하나 하나 case를 구체적으로 설명하기에는 이미 MDN-javascript-this에 상세하게 예시를 들어주었기 때문에 참고하시면 좋을 것 같습니다.
결론
정말 javascirpt의 this는 김춘수 시인의 <꽃>과 같다.
오류
참고
