👑 constructor

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

function 기계(){
  this.이름 = 'Kim'
  ☝ 새로 생성되는 오브젝트(instance)
}
var 오브젝트 = new 기계(); // {이름 : 'Kim'}

✨ 이벤트 리스너

이벤트 리스너 함수 안에서 this를 출력하면, e.currentTarget과 동일하다.
e.currentTarget: 지금 이벤트 동작하는 곳!

--html
<button id='버튼'>버튼</button>


document.getElementById('버튼').addEventListener('click', 
function(e){
  console.log(this); 
  console.log(e.currenttarget) ;
  
  //둘다 <button id='버튼'>버튼</button>
});

🌝 case 1. 이벤트리스너 안에서 콜백함수를 쓴다면 this는?

콜백함수란 -> 함수 안에 들어가는 함수

document.getElementById('버튼').addEventListener('click', 
function(e){
  var arr = [1,2,3];
  arr.forEach(function(){ <<이게 콜백함수
    console.log(this) 
  });
});

여기서 this는 window객체입니다. 저렇게 쌩으로 있는 콜백함수는 그냥 일반함수랑 똑같기 때문에 window가 출력됩니다.

🌚 case 2. 오브젝트 내에서 콜백함수를 쓴다면 this는?

var 오브젝트 = {
  names : ['김', '이', '박'];
  함수 : function(){
      console.log(this) //1번 - var 오브젝트 출력.
      오브젝트.names.forEach(function(){
        console.log(this) // 2번 - window 객체가 3번 출력됩니다.
      });
  }
}


오브젝트.함수(); 

1번 - 오브젝트 내 함수메소드에서 this를 쓰면
그 함수를 가지고 있는 오브젝트를 뜻하기 때문에

2번 - forEach() 안에 있는 함수에 this가 들어있죠?
근데 이 함수는 그냥 일반 함수일 뿐입니다.
그래서 이것도 window입니다.

this값은 function을 만날 때마다 바뀔 수 있기 때문에
내가 원하는 this를 쓰기 힘든 경우가 있습니다.
그럴 땐 함수를 arrow function으로 바꿔보시길 바랍니다.

🌞 case 3. 콜백함수가 arrow function이면 this는?

var 오브젝트 = {
  names : ['김', '이', '박'];
  함수 : function(){
      console.log(this)  // 오브젝트
      오브젝트.names.forEach(()=>{
        console.log(this)  //위에 this 값(오브젝트)을 그대로 재사용!
      });
  }
}


오브젝트.함수();

//var 오브젝트가 총 4번 출력됩니다!