Arrow Function에서 this바인딩

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 어떻게 호출 되었는지에 따라 this 에 바인딩할 객체가 동적으로 결정되었다.

하지만 ES6의 Arrow Function은 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.

동적으로 결정되는 일반 함수와 다르게 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.

이를 Lexical this라고 한다.

 

 

var name = 'june';

var juneyoung = {
  name: 'young',
  getName: function () {
    console.log(this.name);
  },
};

juneyoung.getName();

 

위의 코드를 실행하면 console창에는 어떤이름이 찍히게 될까?

• 정답은 'young'이다.
• 객체의 메서드에서의 this는 자신을 호출한 객체로 바인딩되기 때문이다.

 

 

그렇다면 아래의 코드에서 console창에 나오는 이름은 뭘까?

var name = 'june';

var juneyoung = {
  name: 'young',
  getName: () => console.log(this.name),
};

juneyoung.getName();

저 위의 코드와 같이 young이 출력될까?

답은 아니다. 이 포스팅의 맨 위에서 말했듯이 Arrow Function은 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 언제나 ArrowFunction의 this는 상위 스코프의 this(여기서는 juneyoung 객체의 상위 스코프인 window)를 가리킨다!

즉 'june'이 출력된다!

 

 

마지막으로 이 코드에서는 어떤 name이 출력될까?

var name = 'june';

var juneyoung = {
  name: 'young',
  getName: function () {
    var name = 'hi';
    (() => {
      console.log(this.name);
    })();
  },
};

juneyoung.getName();

바로 getName()메서드의 상위 스코프인 juneyoung객체의 this에 바인됭되서 'young'이라는 이름을 출력한다!

 

 

참고

happycording.tistory.com/entry/Arrow-function-%EB%B9%84%EB%B0%80%EC%9D%84-%ED%8C%8C%ED%97%A4%EC%B3%90%EB%B3%B4%EC%9E%90-ES6