javascript에서 this에 대한 내용을 다룬 포스트입니다.
react에서 class component를 사용할 때나, vue를 사용할 때에는 javascipt의 this
를 사용했습니다. 하지만 현재 next를 사용하면서 this
를 사용한지가 오래되었습니다. 핑계가 길었지만, 결론적으로 솔직히 저는 this
를 잘 모릅니다.(그게 자랑이니..?🤬)
모를 때에는 일단 쳐보는 성향입니다. javascript 언어를 test할 때 주로 사용하는 RunJS
, JS Bin
에 한번 this
를 출력해보았습니다. 위 이미지처럼 2곳 모두 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
를 사용해서 접근했던 것 같습니다.
위에서 제가 말씀드린 것 처럼 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
가 나오지 않습니다.
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
가 나오는지 정리를 해보겠습니다.
위 4가지로 나눈 내용들은 MDN에서 설명하고있는 this
가 동적으로 binding되는 case들을 정리해보았습니다. 정확하게 window, object, undefined로 떨어지는 경우보다는, window 혹은 특정 object로 반환되는 케이스를 중점으로 깊게 확인하면 좋을 것 같습니다.
이 포스트에서는 따로 하나 하나 case를 구체적으로 설명하기에는 이미 MDN-javascript-this에 상세하게 예시를 들어주었기 때문에 참고하시면 좋을 것 같습니다.
정말 javascirpt의 this는 김춘수 시인의 <꽃>과 같다.