THIS에 대해서

THIS

1.호출한 녀석을 바라봄

let person ={
  name:’yoon’,
  printThis1: funciotn(){
    console.log(this)
  },

  printThis2:function(){
    setTimeout(function(){
      console.log(this)
    },1000)
  },

  printThis3:function(){
    setTimeout((function(){
      console.log(this)
    }).bind(person),1000)
  },

  printThis4:function(){
    setTimeout(()=>{
      console.log(this)
    }),1000)
  },

  printThis5:()=>{
    console.log(this)
  }
}

1-1. person.printThis1(); // person
1-2. let a=person.printThis1();  a();  // window
1-3.  person.printThis2() // window (person이 나올것같지만 결과가 다르다,settimeout함수는 window에서 실행하기 때문)
1-4.  person.printThis3() // person  ( bind(person)함수에 person를 this로 설정함 )
1-5.  person.printThis4() // person  ( 화살표함수는 settimeout의 해당 스코프에서 사용하는 스코프(window)의 전의 스코프의 this를 물려받아 사용함 그러므로 person)
1-6.  person.printThis5() // window  ( 화살표함수는 호출한 person의 전의 this를 사용하기때문에 window가 사용됨)

2.이벤트 적용시

btn.addEventListner(‘click’,function(){
   2.1  console.log(this)  // btn 
})

btn.addEventListner(‘click’,()=>{
   2.1  console.log(this)  // window
})