화살표 함수에 없는 것 : 함수 이름, this, arguments
집중해서 볼 것은 this 이다.
-
일반 함수
- 일반 함수는 함수가 실행될 때 함수 자신의 scope안에 자기만의 this가 존재한다
-
화살표 함수
-
화살표 함수는 자신의 scope 안에 자기만의 this가 존재하지 않는다
-
자기만의 this가 존재하지 않으므로 bind, call, apply를 사용할 수 없다
-
따라서 화살표 함수는 scope change 순서에 따라 this를 찾아간다
-
-
this는 호출하는 방법에 의해서 결정됨.
myObj.setCounter()를 했기 때문에 여기서의 this는 myObj가 된다
btn.addEventListener의 콜백함수를 호출하는 애가 button이므로 여기서의 this는 button이 된다
setCounter 함수를 myObj.setCounter()으로 호출하였기 때문에 this는 myObj를 가리키고 bind를 하여 this를 myObj로 묶어주었다
-
화살표 함수는 scope상에 this가 없기 때문에 scope change로 상위 document를 확인하게 됨
-
그러므로 btn의 콜백함수의 상위 document인 setCounter scope를 확인하게 되고 myObj.setCounter()으로 호출하였기 때문에 this는 myObj를 가리킨다
핵심 정리
-
예를 들어 함수 내부에서 선언하지 않은 변수 x를 함수 내부에서 접근하고자 하면 해당 함수 내부에는 x가 없으므로 코드의 위치에 따라 정해지는 스코프 체인을 순서대로 뒤져가면서 x를 계속 찾게 됩니다.
-
이 x처럼 this도 함수내에 존재하지 않으므로 똑같은 과정으로 this를 찾아가게 됩니다.
-
화살표 함수를 선언한 곳에서 this가 존재한다면 그 this를 사용하게 될테고 거기서도 this가 없다면 그 상위의 스코프에서 this를 찾게 됩니다.
