this 키워드

모던 자바스크립트 deep dive 22.1 this 키워드를 읽고 정리 !

 

this가 필요한 이유

1. 자신이 속한 객체를 재귀적으로 참조하는 방식은 바람직하지 않다
   • 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적 단위로 묶은 복잡적인 자료구조
   • 메서드는 프로퍼티를 참조하고 변경할 수 있어야 한다
   • 이를 위해서라면 먼저 메서드 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다
   • 객체 리터럴 방식으로 생성한 객체의 경우, 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다
     * 중괄호 {}를 사용하여 객체를 정의하고, 그 안에 속성(key)과 값(value)을 쌍으로 지정하여 객체를 만드는 방식
   • 재귀적으로 참조한 예

     const circle = {
       // 프로퍼티: 객체 고유의 상태 데이터
       radius: 5,
       // 메서드: 상태 데이터를 참조하고 조작하는 동작
       getDiameter() {
         // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메서드를 참조하려면
         // 자신이 속한 객체인 circle을 참조할 수 있어야 한다.
         return 2 * circle.radius;
       }
     };
     
     console.log(circle.getDiameter()); // 10

      
     
     하지만 자기 자신이 속한 객체를 재귀적으로 참조하는 방식은 바람직하지 않다
     
     
2. 생성자 함수 내부에서 인스턴스를 참조할 수 없다
   • 생성자 함수 내부에서는 프로퍼티 또는 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야 한다
   • 하지만 생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다
     

     function Circle(radius) {
       // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다.
       ????.radius = radius;
     }
     
     Circle.prototype.getDiameter = function () {
       // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다.
       return 2 * ????.radius;
     };
     
     // 생성자 함수로 인스턴스를 생성하려면 먼저 생성자 함수를 정의해야 한다.
     const circle = new Circle(5);

      

 

1, 2번의 이유로 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요하며,

이를 위해 자바스크립트는 this라는 특수한 식별자를 제공한다

 

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

 

함수를 호출하면 arguments 객체와 this가 암묵적으로 내부에 전달된다

함수 내부에서 arguments 객체를 지역 변수처럼 사용할 수 있는 것처럼 this도 지역 변수처럼 사용할 수 있다

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

 

// 객체 리터럴
const circle = {
  radius: 5,
  getDiameter() {
    // this는 메서드를 호출한 객체를 가리킨다.
    return 2 * this.radius;
  }
};

console.log(circle.getDiameter()); // 10

 

객체 리터럴의 메서드 내부에서 this는 메서드를 호출한 객체 circle을 가리킨다

 

// 생성자 함수
function Circle(radius) {
  // this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  this.radius = radius;
}

Circle.prototype.getDiameter = function () {
  // this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  return 2 * this.radius;
};

// 인스턴스 생성
const circle = new Circle(5);
console.log(circle.getDiameter()); // 10

 

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

 

this는 어디서든 참조 가능하며 전역과 일반 함수 내부에서 this는 window를 가리킨다

// this는 어디서든지 참조 가능하다.
// 전역에서 this는 전역 객체 window를 가리킨다.
console.log(this); // window

function square(number) {
  // 일반 함수 내부에서 this는 전역 객체 window를 가리킨다.
  console.log(this); // window
  return number * number;
}
square(2);