this

모던 자바스크립트 딥 다이브의 내용을 읽고 정리

this 키워드

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

this의 특징으로는 뭐가 있을까?

this는..

• 자바스크립트 엔진에의해 암묵적으로 생성된다.
• 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다.
• 함수내부에서 arguments 객체를 지역변수로 사용할 수 있는 것 처럼, this도 지역번수로 사용할 수 있다.
• 단! this가 가리키는 값 즉, this 바인딩은 함수 호출방식에 의해 동적으로 결정된다.
  

바인딩이란 식별자와 값을 연결하는 과정을 의미한다. 예를들어, 변수선언은 변수이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것인다. this바인딩은 this(키워드로 분류되지만 식별자 역할을 함)와 this가 가리킬 객체를 바인딩하는 것 이다.

함수 호출방식에 따른 this 바인딩

(참고) this 바인딩은 함수 호출 시점에 결정된다.

this는 함수 호출방식에 의해 동적으로 결정된다고 정리했다. 이게 무슨 뜻일까?

• 객체 리터럴방식의 this 바인딩

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

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

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

• 생성자 함수 방식의 this 바인딩

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

// 인스턴스 생성
const circle = new Circle(5);

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

생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다. 이처럼 this는 상황에 따라 가리키는 대상이 다르다!