[FE] 04. bind 메소드로 this 제어하기

<4. bind 메소드로 this 제어하기>

* this가 달라지는 경우

showHealth는 어떤 이유인지 바로 출력하지 못하고, 1초 뒤에 결과를 출력하는 함수이다. this가 가르키는 것은?

아래의 경우는 파라미터로 함수를 받는 경우이다. (자바스크립트는 이러한 경우가 많음)

여기서의 this는 setTimeout안에 있는 것이므로 healthObj를 가르키는 것이 아님, 따라서 출력했을 경우 undefined가 출력된다.

(showHealth는 이미 반환이 되었고, 콜백함수가 가리키는 것은 window이다 그러므로 오류가 발생하는 것)

이를 해결하기 위해 추가하는 것이 바인드! function 뒤에 점을 찍고 bind(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' 키워드를 생략할 수 있다. 

위처럼 arrow함수(=>)를 사용하는 경우 bind를 사용하지 않았음에도 정상적으로 출력되었다.

(따라서 ES6 이상의 문법에서는 바인드를 할 일이 거의 없다.)