THIS 의 이해

대부분의 경우, this 의 값은 함수를 호출하는 방법에 의해 결정된다.

 

자바스크립트에서는 선언할 때 결정되는 것이 있고, 호출할 때 결정되는 것이 있는데, 선언할 때 결정되는 것은 '클로저'이고, 호출할 때 결정되는 것이 이 'this'이다.

 

이렇게 this가 맥락에 따라 달라질 수 있으므로, 호출되는 방법과 무관하게 this의 값을 정해버릴 수가 있는 것이 bind 메서드이다.

 

(예제 코드)

 

 

결국 '어디서' 해당 this를 호출하는 함수를 실행했느냐가 중요해진다.

 

whoAmI 메서드는 someone에서 실행하였고,

myWhoAmI 는 전역에서 실행하였다.

 

그리고, 자바스크립트에서, 전역은 결국 window 객체 안이기에, 여기서 실행되는 함수들은 window 객체의 속성으로서, 간주된다. 따라서

 

someone.whoAmI(); 의 this 는 someone 객체가 되는 것이고,

myWhoAm(); 의 this 는 window 객체가 되는 것이다.

 

 

여기서 하나 더 중요한 것은, 함수가 전달될 때, 클로저의 경우와는 달리, this의 맥락까지 같이 전달되지 않는다는 것이다.

 

예를 들어)

 

이렇게 btn 이라는 HTML 태그에서 해당 함수가 호출될 때는, this 불러오는 주체가 버튼 태그이므로, 이 때의 함수 안의 this 는 해당 태그 객체가 되는 것이다.

 

이런 문제를 해결하기 위해 bind를 쓰는 방법은 간단하다.

넘기고자 하는 메서드 뒤에 bind 메서드를 체인해서 this가 될 값을 매개변수로 넣는 것이다.

 

Ex)