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를 고정하도록 만듦
'FrontEnd' 카테고리의 다른 글
[React] Vite 를 사용하여 React 설치 및 기본설정 (0) | 2025.04.26 |
---|---|
[JS] querySelector vs getElement (0) | 2025.04.07 |
[JS] Bubbling, Capturing, Event Propagation, 이벤트 전파 (0) | 2025.04.01 |
[JS] 비동기로 데이터 처리(async/await, fetch then) (0) | 2025.04.01 |
HTML DOM(Document Object Model) (0) | 2025.03.18 |