화살표 함수에서의 this

화살표 함수에서의 this를 이해하기 위해선 먼저 스코프 체인 동작에 대해 먼저 알아야 한다.

Js 스코프 체인

JavaScript에서는 어떤 식별자를 찾을 때 현재 스코프에서 그 식별자가 없으면 바로 상위 스코프 검색한다. (스코프 체인)
점점 상위 스코프로 타고 올라가다가 해당 식별자를 찾으면 탐색을 멈춘다.

화살표 함수의 this

화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩을 하지 않는다. (함수 내부에 this가 아예 존재하지 않는다.)
화살표 함수에서 this에 접근하게 될 경우 화살표 함수 스코프엔 this가 존재하지 않으므로 상위 스코프를 탐색하게 된다. (스코프 체인)
이와 같은 과정을 거치기 때문에 상위 스코프의 this를 사용할 수 있는 것이다.

주의 사항!!
화살표 함수가 선언되는 시점에서 상위 스코프의 this를 사용하는것이 아니다.
화살표 함수의 상위(직전)실행 컨텍스트의 thisBinding이 어떻게 결정됐는지에 따라 화살표 함수에서의 this가 결정이 된다.

예시 코드

 
const a = {
  b : () => {
    console.log(this)
  },
  c(){
    console.log(this)
  }
}
 

 
const a = {
  b : () => {
    console.log(this)
  },
  c(){
    console.log(this)
  }
}
 

a.b() 호출과 a.c() 호출했을때의 결과는 아래와 같이 나온다.

 
a.b() // Window { ... }
a.c() // {b: f, c: f}
 

 
a.b() // Window { ... }
a.c() // {b: f, c: f}
 

a.b()를 호출했을 경우 : 실행 컨텍스트에서 this가 존재하지 않으므로 상위 컨텍스트의 thisBinding에 접근을 한다.
b의 실행 컨텍스트의 상위 컨텍스트는 window이므로 window이므로 window의 this를 가져오게 되는 것이다.

a.c()를 호출했을 경우 : c의 실행컨텍스트 생성시 a obj를 통해 호출을 했으므로 c를 호출한 주체인 a객체에 대한 this가 바인딩이 된다.