JS-BOM this, bind

• 일반적으로 코드블록 안쪽에서 console.log(this)를 할 경우 window가 찍힘.
  ex)

for(let i=0; i<3; i++){
	console.log(this);
}

ex)

setTimeout(()=>{
  console.log(this);
}, 1000);

아래의 경우 this가 윈도우를 출력하는게 아니고, 일반 function이 들어가있는 익명함수의 이벤트문에서는 안쪽의 this값은 이벤트가 발생한 당사자(btn)를 지칭
e.currentTarget과 동일한 역할을 함.
유독 이벤트문만 this가 다른값이 나오게 됨

<button>button</button>

const btn = document.querySelector("button");
btn.addEventListener('click', function(e){
	console.log(this);
})

위의경우 화살표 함수로 변경하면 다른것과 같이 window가 콘솔창에 찍히게 됨

const btn = document.querySelector("button");
btn.addEventListener('click', (e) => {
	console.log(this);
})

• function을 사용하면서 특정 코드 안의 this 값을 원하는 값으로 고정 하려면,

  해당 함수 뒤에 .bind로 묶고 (window)입력하면, 더이상 btn이 나오는게 아니고 window객체를 참조하게 됨.

const btn = document.querySelector("button");
btn.addEventListener('click', function(e){
	console.log(this);
}.bind(window))