this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable) 입니다.

• this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
• this 는 자바스크립트 엔진에 의해 암묵적으로 생성된다.

[ 💡 this 바인딩 ]

+ 바인딩(binding) : 식별자와 값을 연결하는 과정
+ this 바인딩 : this와 this가 가리킬 객체를 바인딩하는 것

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

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

• 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스 다.

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

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

• 자바나 C++같은 클래스 기반 언어에서 this는 언제나 클래스가 생성하는 인스턴스 를 가리킨다.
• 하지만, 자바스크립트의 this 는 함수가 호출되는 방식에 따라 this에 바인딩될 값, 즉 this 바인딩이 동적으로 결정된다.
• 또한 strict mode 는 this 바인딩에 영향을 준다.
  • this 는 코드 어디에서도 참조가 가능하다. 전역 에서도 함수 내부 에서도 참조할 수 있다.
  • 하지만, this의 본질은 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수의 개념이다.
    • 따라서, 객체가 아닌 일반 함수 내부의 this는 필요가 없으므로, strict mode 에서 this를 참조할 경우, undefined 를 반환

함수 호출 방식과 this 바인딩

함수를 호출하는 방식은 크게 다음과 같다.

• 일반 함수 호출
• 메서드 호출
• 생성자 함수 호출
• Function.prototype.apply / call / bind 메서드에 의한 간접 호출