JavaScript의 this는 자기참조변수다!

t h i s 

• 자바스크립트에서 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스(객체)를 가리키는 자기 참조 변수이다.
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스(객체)의 프로퍼티나 메서드를 참조할 수 있다.
• this가 가리키는 값은 함수 호출방식에 따라 동적으로 결정된다. 

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


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

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

 

객체 리터럴의 메서드 내부에서 this는 메서드를 호출한 객체 circle을 가리키고, 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스 Circle(5)를 가리킨다. this는 상황에 따라 가리키는 대상이 다르다. 

 

[개발공부_Blog/JavaScript] - 생성자함수의 객체 생성

[개발공부_Blog/JavaScript] - 객체리터럴

 

 

함수 호출 방식과 this바인딩

this에 바인딩 될 값은 함수 호출 방식에 따라 동적으로 결정된다

• 일반함수 호출 : this에는 전역 객체가 바인딩된다
  strict mode가 적용된 일반함수 내부의 this에는 undefined가 바인딩된다
• this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 객체의 메서드 내부, 생성자 함수 내부에서만 의미가 있다.