3.1.2 화살표 함수와 this

지금까지 화살표 함수가 코드를 더 간결하게 만들 수 있음을 확인했다. 그 자체로 유용하지만 필살기는 아니다. 이것의 중요한 비결은 전통적인 함수와 달리 자체 버전이 없다는 것이다. 대신 변수를 감싸는 것처럼 생성된 컨텍스트의 this를 감싼다.

이게 왜 유용할까? 익숙한 문제를 살펴보겠다. 객체 메서드에 코드를 작성하면서 콜백을 사용하고 싶지만 콜백 내에서 this가 객체를 참조하기를 원한다. 전통적인 함수의 경우에는 그렇지 않는데, 전통적인 함수에는 호출 방법에 따라 설정되는 고유한 기능이 있기 때문이다. 따라서 이 ES5 코드에서와 같이 콜백이 감쌀 수있는 변수를 해결 방법으로 사용하는 것이 일반적이다.

Thingy.prototype.delayedPrepAndShow = function() {
    var self = this;
    this.showTimer = setTimeout(function() {
        self.prep();
        self.show();
    }, this.showDelay);
};