[CS] JavaScript에서의 this

0. intro

• 객체
  • 상태를 나타내는 프로퍼티와 동작을 나타내는 프로퍼티와 동작을 나타내는 하나의 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조
• 동작을 나타내는 메서드는 자신이 속한 객체의 상태(프로퍼티)를 참조하고 변경할 수 있어야 함
• 이 때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야한다.

1. this란

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

2. this 특징

• 자바스크립트 엔진에 의해 암묵적으로 생성
• 코드 어디서든 참조 가능
• this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정
  • this 바인딩
    • 바인딩 : 식별자와 값을 연결하는 과정
    • this와 this가 가리킬 객체를 바인딩하는 것

3. 예시

• 객체 리터럴의 메서드 내부에서의 this는 메서드를 호출한 객체를 가리킴

  // 객체 리터럴
  const circle = {
  		radius: 5;
  		getDiameter() {
  			return 2 * this.radius; // this는 circle을 가리킴
  		}
  } 
  
  console.log(circle.getDiameter()); // 10

• 생성자 함수 내부의 this는 함수가 생성할 인스턴스를 가리킴

  // 생성자 함수
  function Circle(radius) {
  	this.radius = radius; // this는 생성자 함수가 생성할 인스턴스를 가리킴
  }
  
  Circle.prototype.getDiameter = function () {
  	return 2 * this.radius; // this는 생성자 함수가 생성할 인스턴스를 가리킴
  };
  
  // 인스턴스 생성
  const circle = new Circle(5);
  console.log(circle.getDiameter()); // 10

• this는 상황에 따라 가리키는 대상이 다르다.

참고 : 모던 자바스크립트 Deep Dive