[자바스크립트 핵심 개념] this

Deong_gu·2023년 11월 4일

자바스크립트 핵심 개념

목록 보기

3/7

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있음

객체는 상태를 나타내는 프로퍼티와 동작을 나타는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료 구조

동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참고하고 변경할 수 있어야함. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 함

객체 리터럴 방식으로 생성한 개체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있음
생성자 함수 내부에서 프로퍼티와 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야함

생성자 함수로 인스턴스를 생성하려면 먼저 생성자 함수가 존재해야함

생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없음

자바스크립트에서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자 this를 제공

this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다

렉시컬 스코프와 this 바인딩은 결정 시기가 다르다

this 바인딩은 함수 호출 시점에 결정된다

바인딩 - 식별자와 값을 연결하는 과정
this 바인딩 - this(키워드로 분류되지만 식별자 역할)와 this가 가리킬 객체를 바인딩하는 것
자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정됨
실행컨텍스트는 함수를 호출할 때 생성되므로, this는 함수를 호출할 떄 결정된다고 할 수 있음
this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있음, 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달됨. 함수 내부에서 arguments 객체를 지역 변수처럼 사용할 수 있는 것처럼 this도 지역 변수처럼 사용할 수 있음

전역공간에서의 this는 전역객체(브라우저 - window, Node.js - global)를 참조함

어떤 함수를 메서드로서 호출한 경우 this는 메서드 호출 주체(메서드명 앞의 객체)를 참조함

어떤 함수를 함수로서 호출할 경우 this는 전역객체를 참조함. 메서드의 내부함수에서도 같음

함수는 그 자체로 독립적인 기능을 수행
함수로서 호출할 경우, this가 지정되지 않음 (실행 컨텍스트를 활성화할 당시에 this가 지정되지 않은 경우 this는 전역 객체를 바라봄)

콜백 함수 내부 에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역객체를 참조

생성자 함수에서의 this는 생성될 인스턴스를 참조

생성자 함수는 어떤 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수
생성자 함수를 호출하면 우선 생성자의 prototype 프로퍼티를 참조하는 proto라는 프로퍼티가 있는 객체(인스턴스)를 만들고, 미리 준비된 공통 속성 및 개성을 해당 객체(this)에 부여함 => 구체적인 인스턴스가 만들어짐

call, apply 메서드는 this를 명시적으로 지정하면서 함수 또는 메서드를 호출

bind 메서드는 this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만듦

요소를 순회하면서 콜백함수를 반복 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 함

[출처]
모던 자바스크립트 Deep Dive 위키북스 이웅모 지음
코어 자바스크립트 위키북스 정재남 지음

프론트엔드 개발자가 되기 위해 공부 중입니다.