일반 함수와 화살표 함수의 this는 무엇이 다를까?

이전에 살펴본 바에 따르면

https://kimhugo.tistory.com/84

javascript의 this에 대해 꼭 알아야하는 핵심

 

const object = {
  name: "김휴고",
  main: function () {
    console.log(this);
  },
};

const object2 = {
  name: "다른 객체",
  main: object.main,
};

object.main(); // object
object2.main(); // object2

 

위 코드의 결과처럼,

this는 선언된 위치와 상관없이 호출한 객체를 가리킨다.

 

화살표 함수의 this는 자신을 감싸는 스코프의 this를 그대로 가져와서 쓴다.

화살표 함수가 선언된 위치에서 this가 결정이 되고 더 이상 바뀌지 않는다.

 

const object = {
  name: "김휴고",
  main: function () {
    console.log(this);
  },
  mainArrow: () => {
    console.log(this);
  },
};

object.mainArrow(); // window

 

결과는 window를 가리킨다.

node에서 실행해서 window 객체 대신 빈 객체가 호출되었다.

 

const object = {
  name: "김휴고",
  main: function () {
    console.log(this);
  },
  mainArrow: () => {
    console.log(this);
  },
};

const object2 = {
  name: "다른 객체",
  mainArrow: object.mainArrow,
};

object.mainArrow(); // window
object2.mainArrow(); // window

 

다른 객체에서 mainArrow를 호출해도

 

똑같이 window 객체가 호출된다.

 

화살표함수를 객체의 메서드로 사용하는 건 권장하지 않는다.

왜냐하면 this를 통해 객체의 다른 속성에 접근할 때 사용할 경우가 많은데,

화살표 함수에서는 this를 통해 해당 객체에 접근하기가 어렵기 때문이다.

따라서 객체의 메서드로는 일반 함수를 주로 사용한다.

 

 

자세한 사항은 아래 영상 참고

https://www.youtube.com/watch?v=2lIde1abdBY