[JavaScript] 자바스크립트 화살표 함수와 일반 함수의 this

🎯 화살표 함수와 일반 함수의 this

• 화살표 함수의 this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다.
  • 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
  • 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라 한다.
  • 즉, 화살표 함수가 선언될 때의 this를 가리킨다. 그리고 그 값을 계속 유지한다.
  • 화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.
• 일반 함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다.
  • 즉, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정

let o = {
    method() {
        console.log("context : ", this); // o

        let f1 = function() {
            console.log("[f1] this : ", this);
        }

        let f2 = () => {
            console.log("[f2] this : ", this);
        }

        f1(); // global
        f2(); // o
    },
};

o.method();

• f1()은 실행될 때 완전히 새로운 컨텍스트를 생성한다.
• 이때 f1에 바인딩된 컨텍스트가 없으므로 this는 global을 가리킨다.
• f2()는 함수 컨텍스트를 생성하며 this 변수는 부모의 컨텍스트를 가리킨다.
• 따라서 this는 o가 된다.