this의 종류

1. 그냥 쓰거나 함수 안에서 쓰면 this는 window를 뜻합니다.

function 함수(){
  console.log(this)
}
함수();

this의 값은 window로 출력됨.

(window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체)

---

2. 메소드 안에서 쓰면 this는 메소드를 가지고 있는 오브젝트를 뜻합니다.

var 오브젝트1 = {
  data : 'Kim',
  함수 : function(){ console.log(this) } 
}

오브젝트1.함수();

this의 값은 메소드를 가지고 있는 오브젝트1을 뜻합니다.

---

3. constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트를 뜻합니다.

function box(){
  this.이름 = 'Kim'
}
var 오브젝트 = new box();

새로운 오브젝트는 this 라는 키워드로 인해 {이름 : 'Kim'} 이라는 값을 가지고 있습니다.

---

4. eventlistener 안에서 쓰면 this는 e.currentTarget (지금 이벤트가 동작하는 곳)이라는 의미입니다. 

document.getElementById('btn').addEventListener('click', function(e){
  console.log(this);
});
//console.log(e.currentTarget);와 같은 의미

<button id="btn">어쩌구 저쩌구 값이 콘솔창에 출력됨.

여기서 this를 소환하면 이것은 바로 e.currentTarget이라는 뜻과 똑같은 의미입니다. 
e.currentTarget은 지금 이벤트가 동작하는 곳을 뜻합니다. 
간단히 설명하면 지금 addEventListener 부착된 HTML 요소를 뜻한다고 보시면 됩니다.