[Today I Learned] 일반함수와 화살표함수의 this 차이

자바스크립트는 함수선언방식에 따라 this에 바인딩되는 객체가 달라진다.

먼저 일반함수에서의 this 객체는?

1. 함수 실행시에는 전역객체를 가리킴
2. 메소드 실행시 메소드를 소유하고 있는 객체를 가리킴
3. 생성자함수 실행시 새롭게 만들어진 객체를 가리킴

즉, 일반함수는 함수가 어떻게 호출 되었는지에 따라 객체가 동적으로 결정 됨

하지만 화살표 함수는??

1. 언제나 상위 스코프의 this를 가리킨다.

function fun() {
  this.name = "하이";
  return {
    name: "바이",
    speak: function () {     // 일반함수 
      console.log(this.name);
    },
  };
}

function arrFun() {    
  this.name = "하이";
  return {
    name: "바이",
    speak: () => {      // 화살표함수
      console.log(this.name);
    },
  };
}

const fun1 = new fun();
fun1.speak(); // 바이

const fun2 = new arrFun();
fun2.speak(); // 하이

2. 생성자 함수를 사용 할 수 없다.

function fun() {
  this.num = 1234;
}
const arrFun = () => {
  this.num = 1234;
};

const funA = new fun();
console.log(funA.num); // 1234

const funB = new arrFun(); // 에러

3. arguments 사용 또한 못한다.

//일반함수 

function fun() {
  console.log(arguments); // 출력값 : Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}

fun(1, 2, 3);

//화살표함수
const arrFun = () => {
  console.log(arguments); // Uncaught ReferenceError: arguments is not defined
};

fun(1, 2, 3);

화살표 함수는 함수가 선언될 때 this에 바인딩될 객체가 정적으로 결정된다는 것을 알고있자.