JS - THIS란?

this는 객체를 가르키는 키워드입니다. 호출한 객체가 없을 경우 this는 window객체이며
대부분의 경우 this의 값은 함수를 호출하는 방법에 의해 결정됩니다.

const book = {
  name: 'JS',
  bookInfo: function(){
    console.log(this)
  }
}
book.bookInfo() // -> {name: "JS", bookInfo: ƒ bookInfo()}


const book2 = {
  name:"REACT",
  bookInfo: book.bookInfo
}
book2.bookInfo()  // -> {name: "REACT", bookInfo: ƒ bookInfo()}

돔요소에서 this는 어떤것이 될까요?

<button id="btn">button</button>
const btn = document.getElementById('btn');
btn.addEventListener("click", book.bookInfo)
// <button id="btn">button</button>

button을 클릭하면 dom요소 그자체가 this로 출력되는걸 볼수 있습니다.

---

다음과 같이 bind 키워드를 사용해서 this의 객체를 고정 시킬수도있습니다.
bind 메서드는 단 한번만 가능합니다.
즉 한번 bind메서드를 사용해서 this를 고정시키면 해당 this에 bind메서드를 또 사용해서 변경할수없습니다

const bindBookInfo = book2.bookInfo.bind(book2)
bindBookInfo()  // -> {name: "REACT", bookInfo: ƒ bookInfo()}

---

버튼에서도 역시 this를 bind키워드를 활용해서 고정 시킬수 있습니다.

const btn = document.getElementById('btn');
btn.addEventListener("click", book.bookInfo.bind(book2))
// -> {name: "REACT", bookInfo: ƒ bookInfo()}

---

this를 불러오는 함수 앞에 아무것도 없다면 window가 호출되는 경우입니다.

const Book3 = {
  name:"NODE",
  bookInfo: function(){
    console.log("bookInfo", this.name)
    const deptFunc = function(){
      console.log("deptFunc", this.name)
    }
    deptFunc()
  }
}

Book3.bookInfo()

// 
bookInfo NODE 
deptFunc undefined

여기서는 2개의 콘솔이 찍히는데 1개는 bookInfo, NODE가 찍히며
deptFunc는 deptFunc, window객체가 찍힙니다.
참고로 use strict 환경에서는 window 객체가 아닌 undefined가 찍힙니다

---

deptFunc의 this를 Book3로 설정하고 싶을땐 화살표 함수를 사용하면 됩니다.
JS에서는 일반함수의 this와 화살표 함수의 this가 다릅니다
화살표함수에서의 this는 함수가 속해있는 상위 this로 설정됩니다
또한 화살표 함수는 bind 메서드를 사용할수 없습니다.

---

const Book3 = {
  name:"NODE",
  bookInfo: function(){
    console.log("bookInfo", this.name)
    const deptFunc = ()=>{
      console.log("deptFunc", this) 
    }
    deptFunc()  
  },
  bookInfo2: ()=>{
  	console.log(this)
  }
}
Book3.bookInfo()  
// -> 	bookInfo NODE 
		deptFunc {name: "NODE", bookInfo: ƒ bookInfo()}

Book3.bookInfo2() 
// -> window 객체 or undefined가 출력됨.

bookInfo2 같은 경우는 상위 this가 window로 인식됨.

정리 - this는 일반함수에서 사용하여 bind( )를 사용하여 this를 지정해주는게 헷갈리지않고 deptFunc처럼 하위에 있는 함수라면 화살표 함수를 이용해서 간단하게 상위의 this를 받아오는게 좋습니다.