[JavaScript] 자바스크립트의 this란?

this가 너무 햇갈려서 여러 영상과 블로그를 찾아보고

 

가장 이해하기 쉬웠던 설명으로 정리를 해보았습니다.

 

간단하게 정리하면

 

this는 호출될 때 결정된다!

 

 

지금부터 this에 대해 알아보자

 

1. this는 기본적으로 window객체를 가르킵니다.

 

console창에 console.log(this)를 했을때

 

2. this를 바꾸는 경우는?

• 객체를 통한 호출 (위에서 말한 호출될 때 결정된다!)
• new를 통한 객체 생성!
• 화살표함수를 사용할 때
• bind, apply, call 등을 사용할때

위의 4가지의 경우에 this가 변경됩니다.

 

전부다 살펴보겠습니다.

---

객체를 통한 호출

확인용 window.name 을 만듭니다.

 

1. obj.sayName()을 했을때 나오는 값은?

 

 

 

 

 

정답은 드레그

 

J-plum

obj라는 객체를 통해 sayName을 호출 그러므로  this는 obj가 됩니다.

위에서 말한 호출될 때 this가 결정되는 상황입니다.

this가 obj이기때문에 this.name은 obj.name이므로 콘솔에 J-plum이 출력됩니다.

 

난이도 업!

2. obj.sayName()을 했을때 나오는 값은?

정답은 드레그

J-plum

test

 

obj라는 객체를 통해 sayName을 호출 똑같이 sayName의 this는 obj가 됩니다.

햇갈릴 수 있지만 sayName() 안에서는 inner 라는 함수를 하나 만들었을뿐!

호출을 한게 아닙니다

inner()는 그냥 호출이 되었을뿐 this를 바꾸는 요인 하나도 없기때문에 this는 기본값인 window객체가 됩니다

그래서 test가 출력이 됩니다

화살표함수를 사용할 때

 

 

1. 다음의 실행값은?

정답은

test

 

obj객체를 통해 호출을 했기 때문에 this가 obj라고 생각할 수 있지만.

this를 바꾸는 방법 중 하나인 화살표 함수가 있다.

화살표 함수가 가장 우선시되며, 화살표 함수 사용시 해당 블록스코프의 상위 스코프가 this가 된다.

sayName의 경우 obj의 블록 스코프에 해당하며 obj의 상위 블록 스코프는 window 객체가 된다

그러므로 답은 test

 

2. 다음의 실행값은?

정답은

J-plum

J-plum

 

처음 콘솔의 값은 설명하지 않겠습니다. (위에 있습니다)

두번째 inner 함수가 화살표함수로 선언이 되어있는데

inner는 sayName의 블록스코프 안, sayName의 상위 블록 스코프는 obj이다

그러므로 this는 obj가 된다.

bind, apply, call 등을 사용할 때

기본적으로 함수에서의 this는 window객체를 가리킨다

 

 

 

1. call의 사용법

call메서드는 함수를 호출하는 함수이며, window 객체 대신에 매개변수로 들어온 함수를 this로 받게됩니다.

 

사용법 : 함수.call(전달할 것, 값1, 값2); (매개변수는 없어도 됩니다.)

 

2. apply의 사용법

call과 비슷하지만 call은 인자를 나열해서 받고 (1, 2, 3, ...)

apply는 한번에 배열로 받습니다 (test, [1,2,3...]);

 

 

3. bind의 사용법

bind는 생성만 하기에 ()를 붙여 호출을 해주어야합니다.

 

---

 

기타

addEventListener의 호출은? 여기서는 밑줄이 호출입니다 (function은 호출이 아니라 선언입니다)

사실 외워야...  addEventListener의 앞에있는 header가 this입니다.