[javascipt] 일반함수와 화살표 함수에서의 this

화살표 함수와 일반함수의 this 비교

• 일반 함수는 호출 방식에 따라 this가 달라짐.
• 화살표 함수는 정의된 위치의 this를 그대로 가짐.
• 따라서 화살표 함수는 보통 this를 고정해서 사용하고 싶을 때 사용

일반 함수에서의 this

• 일반 함수 안에서 this는 함수를 호출한 주체(객체)를 가리킴
• 그래서 호출 방식에 따라 this가 달라짐
• 예를 들어, 객체의 메서드로 호출하면 그 객체를 가리키고, 그냥 함수로 호출하면 전역 객체(또는 엄격 모드면 undefined)를 가리킴

const obj = {
  name: "철수",
  sayName: function() {
    console.log(this.name);
  }
};

obj.sayName();  // 철수  (obj가 this)
const fn = obj.sayName;
fn();           // undefined or 전역객체 (this가 다름)

---

화살표 함수에서의 this

• 화살표 함수는 함수가 만들어진(선언된) 위치의 this를 그대로 사용
• 즉, 호출할 때가 아니라, 어디서 정의됐는지가 중요함
• 화살표 함수 안의 this는 바뀌지 않음

const obj = {
  name: "철수",
  sayName: () => {
    console.log(this.name);
  }
};

obj.sayName();  // undefined (화살표 함수는 obj의 this가 아님)

/*
화살표 함수는 obj 안에서 선언됐지만, 
화살표 함수는 자신만의 this가 없어서 외부 환경(여기서는 전역, 혹은 모듈 스코프)의 this를 참조함
*/