bind 메소드로 this 제어하기

• 들어가기 전에 this 키워드는 this를 사용하고 있는 함수가 어떻게 불리는가에 따라서 달라지는 경우가 있습니다. 이때 그 함수의 context가 참고하는 객체를 원하는 것으로 바꾸고 싶을 수도 있습니다. 쉽게 말해서 'this를 맘대로 바꿀래~'라는 것이죠.

---

학습 목표

1. this키워드가 변경되는 경우를 알아보고, bind로 이를 어떻게 해결할 수 있는지 알아봅니다.

핵심 개념

• this keyword
• bind method

학습하기

this가 달라지는 경우

showHealth는 어떤 이유인지 바로 출력하지 못하고, 1초 뒤에 결과를 출력하는 함수입니다. this가 무엇을 가리킬까요? var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { setTimeout(function() { console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요"); }, 1000) } } healthObj.showHealth(); 이 코드는 비동기 상황에서 일어나는 것으로, 이와 유사하게 비동기로 동작하는 이벤트 콜백에서 이런 일은 발생합니다. (*참고로 es6의 arrow함수를 사용하는 경우 this가 가리키는 것이 또 다르니 이건 좀 당혹스러울 수 있습니다.)

bind method

bind 새로운 함수를 반환하는 함수입니다. 이부분이 좀 어색하고 혼란스러울 수 있습니다.bind동작은 특이하게도 새로운 함수를 반환한다는 점을 잘 기억해야 합니다. bind함수의 첫번째 인자로 this를 주어, 그 시점의 this를 기억하고 있는 새로운(바인드된)함수가 반환되는 것입니다. var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { setTimeout(function() { console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요"); }.bind(this), 1000) } } healthObj.showHealth(); 위 예제에서 객체리터럴 표기법을 사용했으며, ES6(ES2015)부터는 객체에서 메서드를 사용할 때'function'키워드를 생략할 수 있습니다.

생각해보기

1. bind 함수는 어떻게 동작할까요?
2. bind의 polyfill 코드를 찾아보고 어떻게 동작하는지 그 원리를 고민해보세요.
3. 자바스크립트의 특징을 좀더 이해할 수 있을 겁니다.