JavaScript : 'this' keyword

1. 자바스크립트를 사용하면 할수록 혼란스러운 것이 이 키워드이다. 개인적으로 실행환경과 더블어 자바스크립트의 양대 산맥이다. 그 다음이 비동기식 처리 정도로 보인다.

 

2. 사실 this을 이해하려면 실행환경이 어떻게 만들어지고 어떤 절차로 변수환경, Lexcial Chain,  this가 생성되고 creation phase와 execution phase에 이들이 각각 어떻게 변화는지를 우선 이해하는 것이 필요하다.

 

3. 하지만, 이 내용들을 이해하는 것은 상당히 까다롭다. 그리고 고급 라이브러리를 개발할 수준이 아니면 그다지 필요없는 것이 사실이다. 

 

4. this는 위의 내용들과 밀접하게 관련되어 있지만 별도로 이해해도 무방하다.

 

5. 설명

사전 지식 - this 키워드는 함수 호출시에 동적으로 설정되는 것을 기억하는 것이 중요하다. Runtime이 키워드이다.

 

1> Global scope -> this는 window object를 가리키다.

2> 일반함수 호출 -> strict 모드는 undefined, 일반모드는 window object이다. 

3> 메소드 호출 -> 메소드를 호출하는 객체를 가리킨다.

4> arrow 함수 -> arrow 함수는 사실 statement가 아니라 expression이라 this가 없다. 따라서 Lexcial Chain에 따라 함수를 소유하는 범위에 존재하는 this를 참조한다. 즉 부모의 this를 참조한다.

5> Event Handler -> event handler이 붙어 있는 DOM element를 가리킨다.

 

나는 2번이 제일 이해하기가 힘들었다. 이건 자바스크립트를 설계한 사람이 지정한 거라 고민할 게 없다.

아무리 중첩된 함수라도 그냥 함수를 호출하면 그 함수에서 사용하는 this는 무조건 일반모드일 때 window가 된다.

 

시간이 있으면 하나하나 예를 가지고 와서 설명하겠다. to be continued