this

변진수·2021년 12월 2일
3

자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정됩니다. 즉, this는 함수를 호출할 때 결정된다고 할 수 있습니다.

전역 공간에서의 this

전역 공간에서 this는 전역 객체를 가리킵니다.
브라우저 환경에서 전역객체는 window이고 Node.js 환경에서는 global입니다.
전역 객체의 프로퍼티는 delete 키워드로 삭제가 가능한데, 처음부터 전역객체의 프로퍼티로 할당한 경우에는 삭제가 되는 반면 전역변수로 선언한 경우에는 삭제가 되지 않습니다.

메서드의 this

this에는 호출한 주체애 대한 정보가 담깁니다. 어떤 함수를 메서드로서 호출하는 경우 호출 주체는 바로 함수면 앞의 객체입니다. 점 표기법의 경우 마지막 점 앞에 명시된 객체가 곧 this가 됩니다.

함수의 this

어떤 함수를 함수로서 호출할 경우에는 this가 지정되지 않습니다. 따라서 this는 실행 컨텍스트를 타고 올라가서 전역 객체를 바라봅니다. 함수에서의 this는 전역 객체를 가리키게 됩니다.
화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠지게 되어, 상위 스코프의 this를 그대로 활용하게 됩니다.

콜백 함수의 this

콜백 함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조하지만, 제어권을 넘겨받은 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조하게 됩니다.

생성자 함수의 this

new 명령어로 함수를 호출하면 해당 함수의 인스턴스가 생성됩니다. 인스턴스 안에서 this는 인스턴스 객체 자신을 가리킵니다. 클래스로 인스턴스를 생성하면 인스턴스의 this는 인스턴스 객체 자신을 가리키는 것과 같습니다.

call 메서드의 this 바인딩

call 메서드는 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령입니다. call 메서드의 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로 합니다.

apply 메서드의 this 바인딩

apply 메서드는 call 메서드와 기능적으로 동일합니다. call 메서드는 첫 번째 인자를 제외한 나머지 모든 인자들을 호출할 함수의 매개변수로 지정하는 반면, apply 메서드는 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다는 차기가 있습니다.

bind 메서드의 this 바인딩

call과 비슷하지만 즉시 호출하지 않고 넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환하는 메서드입니다.

profile
Web Frontend Engineer

0개의 댓글