const cat = {
  name: 'meow',
  foo1: function() {
    const foo2 = function() {
      console.log(this.name);
    }
    foo2();
  }
};

cat.foo1();	// undefined

위에 코드를 보면 foo1은 객체의 메서드로 내부에서 this는 cat 객체에 binding이 되지만 foo1 메서드의 내부의 foo2 함수는 객체가 아닌 함수 호출이므로 this는 전역객체에 binding이 되어 버리기 때문에 결과는 undefined가 나온다.

const cat = {
  name: 'meow',
  foo1: function() {
    const foo2 = () => {
      console.log(this.name);
    }
    foo2();
  }
};

cat.foo1();	// meow

하지만 foo2를 그냥 함수가 아닌 화살표 함수로 선언하면 정상적으로 this는 cat의 객체를 binding 한다.

왜?

js에서는 this는 동적으로 binding이 된다. 하지만 화살표 함수의 경우에는 this는 동적으로 binding되지 않고 렉시컬 환경에 binding이 되는데 즉 다시 말하면 상위 스코프가 this로 binding이 된다.

화살표 함수 사용을 지양해야 하는 곳

1. 메서드

const cat = {
  name: 'meow';
  callName: () => console.log(this.name);
}

cat.callName();	// undefined

2. 생성자 함수

const Foo = () => {}
const a = new Foo(); // error

생성자 함수를 선언할 때 화살표 함수로 선언해버리면 에러가 발생한다.

3. addEventListener

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log(this);	// Window
  this.innerHTML = 'clicked';
});

button.addEventListener('click', function() {
   console.log(this);	// button 엘리먼트
   this.innerHTML = 'clicked';
});

addEventListener을 통해 만드는 콜백의 this는 해당 태그의 element를 가리키지만 화살표 함수로 콜백을 만들면 this binding은 렉시컬 환경인 window에 바인딩이 된다.

출처

https://velog.io/@padoling/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-this-%EB%B0%94%EC%9D%B8%EB%94%A9