Javascript에서의 this

Javascript에서의 this는 자신이 속한 객체 또는 자신이 생설할 인스턴스를 가리키는 자기 참조 변수이다.
this를 통해 자신이 속한 객체 또는 자신이 생설한 인스턴스의 프로퍼티나 메서드를 참조할 수 있으며, this가 가르키는 값은 함수 호출 방식에 의해 동적으로 결정된다.

함수 호출 방식에 따른 this 바인딩은 아래와 같다

1.일반 함수로 호출

기본적으로 this는 전역 객체가 바인딩된다.(window)
일반 함수 혹은 아래의 호출 방식이 아닌 다른 곳에서 선언되면 this는 전역 객체가 바인딩 된다.
즉 {window}와 같다는 것이다.

2.메서드 호출

메서드 내부의 this는 메서드 이름 앞의 마침표(.) 연산자 앞에 기술한 객체가 바인딩된다.
즉, 그 함수를 가지고 있는 오브젝트 전체를 뜻한다.

3.생성자 함수 호출

생성자 함수 내부의 this에넌 생성자 함수(미래에 생성 될 함수)가 바인딩된다.

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

//새 객체 Circle 생성
const circle1 = new Circle(5);
console.log(circle1.getDiameter());//10

위와 같이 new 연산자와 함께 호출하여 사용하며, new 연산자를 사용하지 않으면 일반 함수로 동작 한다.

4.event listener안에서 호출

event listener안에서 this를 호출 할 경우 현재 타켓이 된 대상, e.currentTarget랑 같아 진다.