JS) this, bind

1. this

javascript에서 this는 한마디로 함수를 호출한 객체다. 즉 선언한 시점에서 this가 결정되는 것이 아니라 호출한 시점에서 this가 결정된다.

 

개발자 도구에서 this를 콘솔에 출력하면 window 객체가 출력된다. window에서 this를 콘솔로 출력했기 때문에 window가 함수를 호출한 객체가 된다.

 

이렇게 obj라는 객체의 item이 this를 가지고 있고 함수를 호출할 때 그 item을 인자로 받더라도 this를 호출한 객체는 window이기에 console 또한 window가 출력된다.

 

반대로 이 경우는 window 객체에선 obj 객체의 main이란 함수를 호출한 것이고 결국 console.log 함수의 호출은 obj 객체의 main 함수, 즉 obj가 함수를 호출한 객체이기에 this는 obj 객체가 된다.

 

위 경우는 console.log 를 호출하는 함수인 func 함수를 그냥 호출했을 때와 obj 객체의 item 값으로 할당해주고 그 item을 호출했을 때의 결과다. 같은 func 함수지만 func 함수를 그냥 호출했을 때는 window 객체가 출력되지만 obj 객체의 item을 호출했을 때는 obj 객체가 출력된다.

 

2. bind

bind는 this를 원하는 객체로 고정해준다.

이렇게 bind 함수를 통해 func 함수가 호출될 때 this는 { name: 'hong' } 객체로 고정할 수 있다. 

bind는 function func() { ~ }.bind 와 같은 형태로 선언과 동시에 호출할 수도 있다.