FrontEnd

[FrontEnd] jQuery 화살표 함수(=>)의 this

KJihun 2025. 4. 10. 09:19
728x90

기본 함수 (function)의 this

기본 함수는 호출될 때의 컨텍스트에 따라 this가 결정

일반 함수는 실행 당시의 객체 컨텍스트에 따라 this가 동적으로 바뀜

 


화살표 함수 (=>)의 this

화살표 함수는 this를 렉시컬(lexical)하게 바인딩한다

렉시컬(lexical) : 함수를 정의할 때 상위 스코프의 this를 고정하는 것

const obj = {
  name: 'Hello',
  clickBtn: () => {
    console.log(this.name); // this는 obj가 아님! 외부 스코프의 this
  }
};

obj.clickBtn(); // undefined
 
 

이 때의 this는 obj가 아니라 obj를 감싸는 외부 스코프(전역)의 this
즉, 함수가 어디에서 정의되었는지에 따라 this가 고정된다

 


 

this를 렉시컬하게 바인딩하는 이유

 

기존 function의 this는 호출될 때마다 주체가 달라지는게 불편하다고 느껴 설계 자체에서 this를 고정하도록 만듦