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

기본 함수 (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를 고정하도록 만듦