🐧this

**this 란 어떤 함수가 호출한 방법에 의해 결정된다.**

즉, this 는 어떤 객체를 가리키는 키워드 무슨 객체인지가 중요하다.

this 가 가리키는 객체는 상황에 따라 바뀐다. 디스는 함수를 호출한 객체?? 라고 할 수도 있지만 또 그렇지만은 않다.

function main(){
  console.log(this)
}

main() //window 전역을 불러옴

이 결과에서는 window 전역을 불러온다 하지만 엄격모드를 쓴다면 어떻게 될까??

'use strict'

function main(){
  console.log(this)
}

main() // undefined
window.main() // TypeError: window.main is not a function

main만을 호출했을때는 undefined 가 뜨는 걸 볼 수가 있다.

객체에서는 어떻게 나올까?

function main(){
  console.log(this)
}

const obj = {
  name: 'joo',
  main,
}

obj.main() // { name: 'joo', main: ƒ main() }

메인을 객체의 구성원으로 포함을 시켜줘도 똑같이 디스는 obj 안에서 name값을 받아온다.

그렇다면 객체 스코프가 2개라면 어떻게 나올까?

function main(){
  console.log(this)
}

const obj = {
  name: 'joo',
  obj2 : {
    name: 'bob',
    main,
  }
}

obj.obj2.main() //{ name: 'bob', main: ƒ main() }

여기서는 joo가 아닌 bob을 받아오고 있다. 왜냐 !!! main() 함수를 직접적으로 호출할 객체는 obj2이기 떄문이다. 여기서 정의한대로 this는 어떤 함수가 호출한 방법에 의해 결정된다고 했다. 나도 잘 몰랐지만 여기서도 this에 대한 감이 왔었다.

그렇다면 bind라는 건 뭘까?

🐧bind

bind 는 바인딩의 사전적 정의는 ‘묶다’ 라는 뜻으로 this 을 묶어서 사용할 수 있게 해준다.

예제부터 살펴보자

//this만 사용했을 경우

function main(){
  console.log(this)
}

const ob = {
  name: 'jjj',
  main: function(){
    console.log(this)
  }
}

ob.main() // { name: 'jjj', main: ƒ main() }

위에서 봣던거랑 같이 main() 함수에서는 메인을 객체의 구성원으로 포함을 시켜줘도 똑같이 디스는 obj 안에서 name값을 받아온다.하지만 여기서 bind 를 쓴다면??

const ob = {
  name: 'jjj',
  main: function(){
    console.log(this)
  }.bind({name:'zzz'}),
}

ob.main() // { name: 'zzz' }

뒤에 나오는 window main 값을 더이상 불러오지 않고 뒤에 zzz라는 인자를 묶어서 가져오는 것을 볼수 있다.