화살표 함수와 this

화살표 함수와 this

일반 함수와 화살표 함수의 this는 바인딩할 객체를 결정하는 시점이 다르다.

• 일반 함수 : 함수 호출 방식에 따라 동적으로 결정
• 화살표 함수 : 정적으로 결정. 항상 상위 스코프의 this 를 가리킨다 (Lexical this)

다음 예시를 통해 둘의 차이를 알 수 있다.

/* ========================
		일반 함수
=========================== */

function Prefixer(prefix) {
  this.prefix = prefix;
}

Prefixer.prototype.prefixArray = function (arr) {
  return arr.map(function (x) {
    return this.prefix + ' ' + x; // 여기서 this는 전역 객체를 가리킨다
  });
};

/* ========================
		화살표 함수
=========================== */
function Prefixer(prefix) {
  this.prefix = prefix;
}

Prefixer.prototype.prefixArray = function (arr) {
  // 다음 라인의 this는 상위 스코프인 prefixArray 메소드 내의 this를 가리킨다.
  return arr.map(x => `${this.prefix}  ${x}`);
};

[출처] https://poiemaweb.com/es6-arrow-function

주의점

• this가 바인딩되는 방식의 차이 때문에, 클래스의 메소드 정의시에는 화살표 함수를 사용하지 않아야 한다(프로토타입에 메소드 추가할 때에도 마찬가지) 이 경우 this가 메소드를 호출한 객체가 아니라 전역 객체를 참조하기 때문이다.
• 화살표 함수는 call, apply, bind 메소드로 this를 변경할 수 없다(this가 정적 바인딩 되므로)

[참조] https://poiemaweb.com/es6-arrow-function