개발자가 되고 싶은 개발자

[JavaScript] this 본문

Dev/JavaScript & TypeScript

[JavaScript] this

Fullth 2022. 5. 3. 22:00

(코어 자바스크립트(정재남 저- 위키북스)를 참조하여 작성했습니다.)

 

코어 자바스크립트 - YES24

자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니

www.yes24.com

 

자바스크립트에서는 실행 컨텍스트가 활성화 될 때(생성될 때), this의 정보가 결정됩니다.

(실행 컨텍스트에 대한 설명은 아래 포스팅을 참고하시면 됩니다.)

 

[JavaScript] 실행 컨텍스트

(코어 자바스크립트(정재남 저- 위키북스)를 참조하여 작성했습니다.) (ECMAScript Spec 9.4에 해당 내용이 명세되어 있습니다.) 코어 자바스크립트 - YES24 자바스크립트의 근간을 이루는 핵심 이론들

fullth.tistory.com

주로 실행 컨텍스트를 구성하는 방법은 함수를 호출할 때라고 했습니다.

즉, 함수를 호출할 때 this가 결정된다 라고 할 수 있습니다.

 

저자는 "함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것입니다."라고 했습니다.

 

어떤 방식과 상황이 있는지에 초점을 두고 this가 변하는 과정을 알아야 합니다.

전역공간에서 this

전역 컨텍스트를 생성하는 주체는 전역 객체 입니다. 즉, 전역 공간에서의 this는 전역 객체를 가리킵니다.

메서드로서 호출할 때 메서드 내부에서 this

(함수: 그 자체로 독자적 기능 수행 ex.) return a + b;

메서드: 호출한 대상 객체에 대한 기능 수행 ex.) student.length;

객체의 메서드로 호출될 경우에만 메서드로 호출되고, 그렇지 않은 경우에는 함수로 호출됨)

 

this에는 호출한 주체에 대한 정보가 담깁니다.

즉, student.length; 에서는 student 정보가 this에 담깁니다.

 

책에서도 설명하듯, 메서드로의 호출은 '.'의 여부로 쉽게 구분이 가능합니다.

함수로서 호출할 때 그 함수 내부에서 this

호출 주체(객체)를 명시하지 않고, 직접 호출하기 때문에 this에 대한 정보가 담기지 않습니다.

이 경우 전역 객체를 참조합니다. 메서드의 내부에서도 동일합니다.

 

이렇게 전역 객체를 참조하는 부분은 더글라스 아저씨의 설계상의 오류라고 합니다.

콜백 함수 호출 시 그 함수 내부에서 this

콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따릅니다.

정의하지 않은 경우에는 전역 객체를 참조합니다.