[JS 스터디] 코어 자바스크립트 3강 this

코어 자바스크립트 3강 this에 대해 스터디했다.

this가 가리키는 것이 사용자와 의도와 다르게 동작할 수 있고,

이를 방지하기 위해 꼭 알아되는 내용이었다.

 

 

1. this란 무엇인가?

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this가 가리키는 값(this바인딩)은 실행 컨텍스가 생성될 때 결정된다.

전역 공간에서는 전역 객체를 가리키며, 브라우저 환경에서는 window, Node.js 환경에서는 global 객체를 가리킨다.

 

* Node.js를 js파일에서 동작해보니 this는 global객체를 출력하지 않고 module.exports를 출력했다. 이는 js파일이나 터미널로 Node.js를 수행할 시, Node.js에서 최상위 범위는 전역스코프가 아니고 Node.js의 모듈 내부로 동작하기 때문이다. global객체가 출력되는 것을 보고 싶다면 node.js를 직접 실행해서 확인해보면 원하는 결과가 출력된다.

 

2. 메서드와 함수의 this 차이

함수는 그 자체로 독립적인 기능을 수행하고, 메서드는 자신을 호출한 객체에 관한 동작을 수행한다.

메서드에서 this를 수행하면 호출한 주체에 대한 정보가 담기나, 함수에서는 호출 주체가 명시되지 않았으므로 전역객체를 가리키게 된다. 따라서 ES6부터 지원하는 화살표 함수를 사용하면 이러한 문제를 해결할 수 있다.

 

3. 콜백함수에서 this는?

기본적으로 this이지만, 제어권을 받은 함수에 별도로 this가 될 대상을 지정했다면 그 대상을 참조한다.

 

4. 생성자 내부 함수에서 this는?

인스턴스 객체를 가리킨다.

 

5. 명시적으로 this를 바인딩하는 방법은?

call, apply, bind 메서드가 있다. call메서드와 apply 메서드는 첫번째 인자로 this를 바인딩할 인자를 주는 것과 기능적으로도 동일하지만 이후의 인자에서 apply 메서드가 배열로 받는다는 차이점만 있다. bind메서드는 즉시 호출하지 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드라는 것이 차이이다.