this

---

1. 일반 함수에서 this는 window
2. object 내의 함수(메서드)에서 쓰면 함수를 동작시키는 object

3. constructor에서

JS에서 오브젝트를 비슷한걸 여러개 만들고 싶을 경우

오브젝트를 복사하는게 아니라 constructor를 만든다.

function 기계() {
	this.이름 = 'Kim';
}

var 오브젝트 = new 기계();

여기서의 this는 기계로부터 새로 생성될 오브젝트들을 의미한다.

4. eventListener에서

document.getElementById('버튼').addEventListener('click',
	function(e){
	  console.log(this)
});

이벤트리스너에서 this는 e.currentTarget이라는 뜻과 같은 의미.

e.currentTarget은 지금 이벤트가 연결된 객체를 의미한다.

이벤트리스너 안에서 콜백함수를 쓴다면?

document.getElementById('버튼').addEventListener('click', function(e){
  var 어레이 = [1,2,3];
  어레이.forEach(function(){
    console.log(this)
  });
});

eventListener 내부는 맞지만 그 안에서 function을 하나더 만났기 때문에 일반함수와 같다고 보면 된다.

그러므로 window객체가 3반 출력된다.

오브젝트 안에서 콜백함수를 쓴다면?

var 오브젝트 = {
  이름들 : ['김', '이', '박'];
  함수 : function(){
      오브젝트.이름들.forEach(function(){
        console.log(this)
      });
  }
}

• 오브젝트.함수() 시, 출력 되는 결과 값은? forEach() 안에 있는 함수는 일반함수 이다. 그러므로 window를 3번 출력한다.
  

this 값은 function을 만날 때마다 바뀔 수 있기 때문에

의도치 않는 값이 올 수도 있다.

이럴 땐 arrow function을 사용해 보자.

var 오브젝트 = {
  이름들 : ['김', '이', '박'];
  함수 : function(){
		console.log(this) // --- (1)
	  오브젝트.이름들.forEach(() => {
			console.log(this) // --- (2) 
     });
  }
}

(1) 에서 this는 함수 메서드를 가지고 있는 오브젝트 ({이름들: Array(3), 함수: f}) 를 의미한다.

콜백함수로 일반 함수가 쓰였다면 (2)에서 this는 window 객체였지만 화살표 함수는 this 를 새롭게 재정의 하는게 아니라 (1)에서의 this 와 같은 대상을 가리킨다.