[TIL] 자바스크립트 this

프론트엔드 개발자 면접을 보다보면 this에 관한 질문을 많이 받습니다. 혹은 객체지향 프로그래밍을 작성할 때 class 문법을 활용하다보면 this를 많이 활용하게 되는데요, 오늘은 이 this가 도대체 어떤 것인지에 대해 알아보도록 하겠습니다.

 

1. this가 도대체 뭐죠?

 

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this  바인딩을 제공하지 않는 화살표 함수를 추가했습니다(이는 렉시컬 컨텍스트안의 this값을 유지합니다).
MDN에 나와있는 내용을 보면 너무 추상적이어서 어떤 느낌인지 감이 잘 오지 않습니다.
출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this (MDN 문서)

this - JavaScript | MDN

 

this는 쉽게 생각하면 '어떤 환경에서 누가 나를 불렀는가'를 뜻합니다. 그래서 그냥 this를 호출해보면 window값이 나옵니다.

 

this를 그냥 호출했을 때.

 

2. 선언형 함수에서의 this 

 

선언형 함수 안에서 this는 함수의 주인에게 바인딩됩니다. 별다른 바인딩이 이루어지지 않았다면, 함수의 주인은 window이기 때문에, this는 윈도우를 가르키게 됩니다.

 

 

하지만 strict 모드에서는 조금 다르게 작동합니다. 함수 내의 this값에 디폴트 값이 설정되어있지 않기 때문에 undefined가 됩니다.

 

 

3. 메서드에서 호출한 this

 

메서드 호출 시 메서드 내부 코드에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩됩니다.

 

 

하지만 메소드를 따로 호출하여 할당한다면, this는 달라지게 됩니다. 이때는 메소드가 호출된 환경이 window이기 때문에, window 객체를 가리키게 됩니다.

 

 

4. 생성자 안에서 호출한 this

 

생성자 함수를 활용하여 this를 호출하면 생성자 함수가 생성하는 객체로 this 가 바인딩 됩니다. 하지만, new 키워드를 사용하지 않고 호출하게 된다면, 앞서 말한 함수 선언형이 되기 때문에 이때의 this는 window에 바인딩 됩니다.

 

new 생성자를 활용하여 this를 호출하면 함수가 생성한 객체에 바인딩 되지만, 그렇지 않으면 window에 바인딩 되기 때문에 name을 찾지 못하는 모습입니다.

 

5. 명시적 바인딩

 

call()과 apply() 메소드를 활용하면 객체에 this를 명시적으로 바인딩 할 수 있습니다. 

 

 

이때 call()과 apply()의 차이점은 call()은 인수 목록을 받는 반면에, apply()는 인수 배열 하나를 받는다는 점이 차이점입니다.

 

주의:  이 함수 구문은 apply()와 거의 동일하지만, call()은 인수 목록을, 반면에 apply()는 인수 배열 하나를 받는다는 점이 중요한 차이점입니다.
출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Function.prototype.call() - JavaScript | MDN

 

6. 화살표 함수에서의 this

 

ES6에 들어오면서 새로운 함수의 호출방식인 화살표 함수가 도입되었습니다. 화살표 함수의 경우에는 this 바인딩이 선언형 방식과는 다른데요, 이 경우 this는 전역객체가 아니라 바로 바깥 함수 또는 클래스에 바인딩 되게 됩니다.

 

 

 

참조자료: 

- MDN

- https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb
- https://nykim.work/71