[JavaScript] 딥다이브 / 22장 this

이전에 포스팅했던 this에 대한 내용은 아래 두 링크에 담겨 있다.

자바스크립트에서 this가 가리키는 값에 대해 알아보자.
자바스크립트 화살표 함수의 this와 this를 분석할 수 없는 케이스에 대해 알아보자.

이번 포스트에서는 this의 개념 및 사용 이유에 대해 자세히 살펴볼 예정이다.

this 키워드

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

메서드는 자신의 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 하며 이를 위해서는 우선 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.

const circle = {
  radius: 5;
  getDiameter() {
    return 2 * circle.radius;
  }
};
console.log(circle.getDiameter());

객체 리터럴 방식으로 생성한 객체의 경우 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있지만 권장되지 않는 방식이다.

function Circle(radius) {
  ???.radius = radius;
}

Circle.prototype.getDiameter = function() {
  return 2 * ???.radius;
};

const circle = new Circle(5);

생성자 함수로 인스턴스를 생성하는 경우는 어떨까? 생성자 함수를 정의하는 시점에서는 아직 인스턴스가 만들어지지 않은 상태이므로 인스턴스를 가리키는 식별자를 정의할 수 없다.

따라서 객체 리터럴의 경우 자신이 속한 객체를, 생성자 함수의 경우 자신이 미래에 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다. 이를 위해 JS에서 this라는 식별자를 제공한다.

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.

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

자바스크립트의 this는 함수 호출 방식에 따라 this 바인딩이 동적으로 결정된다. 이러한 점은 함수 정의가 평가되어 함수 객체가 생성되는 시점에 정적으로 결정되는 렉시컬 스코프와 대비된다.