JavaScript this

object - method and this

03 this

Event handling 원리와 핸들러 내부의 this

JavaScript (Prototype, this, module)

this (MDN 문서 정리)

• 이 문서는 위 문서들의 내용을 통합하여 요약 / 정리한다.

context와 this

• JS에서 context란 this를 의미한다고 봐도 무방하다.
  • 예를들어, 이 함수의 context가 뭐냐? 라는 질문은 이 함수의 this 값은 무엇을 가리키고 있냐? 를 묻는 것과 같다고 볼 수 있다.
• 이처럼 this는 컨텍스트에 따라 달라지고, JavaScript에서는 this 값을 결정하는 세가지 종류의 컨텍스트가 있다: function context, class context, 그리고 global context다.

global context

• this가 global scope에 속할때, 즉 함수나 클래스 바깥에 있을때를 이야기한다고 보면 된다.
  • block안에 있는 경우나 object안(이면서 메소드 바깥)에 있는 경우 등도 포함된다.
• 이때 this는 strict mode 여부와 관계 없이 globalThis, 즉 일반적으로는 전역 객체를 가리킨다. 브라우저에서는 window 객체.
  • 일반 함수를 단독 호출할때 this는 strict mode일때 undefined를 가리키기 때문에 헷갈릴 수 있는데, 그건 함수 안을 얘기하는 거니까 function context인 거고, global context에서 this는 무조건 globalThis다.
• 만약 source가 module로 불러와지는 경우, 최상위 scope에서 this는 언제나 undefined를 가리킨다.
• eval()안에 있는 source의 경우 direct eval이면 enclosing context를, indirect eval이면 globalThis를 가리킨다고 하기는 한데… 자세한 것은 여기 참고하고, eval에 대해 더 공부해볼 필요가 있을 듯 하다.

function context

• 가장 일반적인 상황이자, 가장 많이 접하게 되는 상황이다. this가 함수 안에 있을 때를 의미한다.
• function context에서 this는 해당 this가 속한 함수가 “어떻게 호출되냐”에 따라 결정된다. 즉 달리 말하면 function context는 함수가 어떻게 invoke되느냐에 따라 바뀐다라고 표현할 수 있다. (어떻게 정의/생성되느냐가 아니다)