피드로 돌아가기
Dev.toFrontend
원문 읽기
JavaScript this 키워드의 실행 컨텍스트 결정 원리와 제어 전략
Understanding the this Keyword in JavaScript
AI 요약
Context
함수 호출 방식에 따라 가변적으로 변하는 this 바인딩 체계. 실행 시점에 결정되는 동적 바인딩으로 인한 예측 불가능한 동작 발생. 특히 Arrow Function과 일반 함수 간의 서로 다른 컨텍스트 처리 방식이 주요 혼란의 원인.
Technical Solution
- 전역 범위 호출 시 브라우저의 window 또는 Node.js의 global 객체를 가리키는 기본 바인딩 구조
- 객체의 메서드로 호출될 때 해당 호출 주체인 객체에 this를 할당하는 Implicit Binding 방식
- call, apply, bind 메서드를 통해 개발자가 직접 this 컨텍스트를 지정하는 Explicit Binding 전략
- call과 apply의 즉시 실행 차이 및 bind를 통한 새로운 함수 생성 및 컨텍스트 고정 메커니즘
- 자신만의 this를 가지지 않고 상위 스코프의 컨텍스트를 그대로 사용하는 Arrow Function의 Lexical this 특성
Key Takeaway
this는 함수 정의 시점이 아닌 호출 시점의 주체에 의해 결정되는 동적 특성을 가짐. Lexical scope를 유지해야 하는 콜백 함수 설계 시 Arrow Function을 활용하여 컨텍스트 유실을 방지하는 설계 원칙이 필요.
실천 포인트
객체 메서드 내에서 외부 컨텍스트를 유지해야 하는 콜백 함수 사용 시 Arrow Function을 적용할 것