[JavaScript] JavaScript 클래스 - this

일반 함수와 화살표 함수는 헷갈리지만 그만큼 매우 중요한 개념이다!

📌 일반(Normal) 함수는 호출 위치에서 따라 this 정의
📌 화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의

 

일반 함수는 normal이 호출되는 부분에서 this가 정의된다.

YeJin이 곧 this이고 name 부분을 꺼내서 쓴다.

 

이와 다르게 화살표 함수는 호출 위치와 전혀 상관없이 선언될 때 this가 무엇인지 알 수 있다.

현재 선언된 코드에선 this를 정확하게 알 수 없는데 name이라는 속성을 찾으려고 하기 때문에 undefined가 출력된다. 

 

 

YeJin의 noraml 함수 자체가 amy의 normal 함수에 할당된다. 그러므로 호출된 위치에 있는 name이 Amy로 바뀌어 출력되는 것을 볼 수 있다. 그러나 amy의 arrow 함수는 선언된 위치에서 this가 정의되기 때문에 호출 위치와는 전혀 상관없이 똑같이 undefined가 나온다.

일반 함수: amy가 곧 this이고 this의 name이 Amy이다.

화살표 함수: 함수가 만들어진 위치에서 this가 정의되어 undefined다.

 

 

❗생성자 함수일 경우에도 같은 결과

 

❗setTimeout일 경우

일반함수 => 호출 위치에 따라 this 정의

어디서 함수가 호출되는지 찾아야 한다!

setTimeout이라는 내부 로직으로 콜백이 들어가서 실행이 되기 때문에 undefined가 출력된다.

 

화살표 함수 => 자신이 선언된 함수 범위에서 this 정의

화살표 함수를 감싸고 있는 또 다른 함수는 timeout이라는 메서드를 정의할 때 사용한 함수이다.

이 범위에서 this가 정의되고, 함수 부분의 this는 곧 일반 함수가 정의된 timer라는 객체 데이터를 가리킨다. 

 

 

setTimeout, setInterval일 경우 콜백으로 화살표 함수를 쓰는 것이 좋다. 

 

자바스크립트의 이미 정의되어있는 함수 어딘가에서 정의되는 것이 아니라

명확하게 작성한 특정 범위에서 this가 정의되기 때문이다.