프론트엔드 개발 · 중급
JavaScript의 this 바인딩 규칙에 대해 설명해주세요.
힌트 · 일반 함수, 메서드, 생성자, 화살표 함수에서의 this를 비교해보세요.
전역함수 호출applycallbind
모범답안
JavaScript에서 this는 함수가 호출될 때 결정되는 실행 컨텍스트를 나타냅니다. this 바인딩은 크게 네 가지 규칙에 따라 결정됩니다.
첫째, 일반 함수 호출의 경우 this는 전역 객체(브라우저에서는 window, Node.js에서는 global)를 가리킵니다. strict mode에서는 undefined가 됩니다.
둘째, 메서드 호출의 경우 this는 메서드를 호출한 객체를 가리킵니다. 예를 들어 obj.method()에서 this는 obj가 됩니다.
셋째, 생성자 함수 호출의 경우 this는 새로 생성된 객체를 가리킵니다. new MyClass()를 통해 생성된 객체 내부에서 this는 해당 객체를 참조합니다.
넷째, 화살표 함수의 경우 this는 함수가 정의될 때의 주변 컨텍스트의 this 값을 상속받습니다. 즉, 화살표 함수 내부의 this는 상위 스코프의 this와 같습니다.
apply, call, bind 메서드를 사용하면 this 값을 명시적으로 지정할 수 있습니다. apply와 call은 함수를 즉시 호출하며, bind는 새로운 함수를 반환합니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 JavaScript 면접 질문
- JavaScript의 클로저(Closure)란 무엇이며, 실제 사용 예시를 들어주세요.
- JavaScript의 이벤트 루프(Event Loop)와 비동기 처리 방식에 대해 설명해주세요.
- Promise와 async/await의 차이점과 에러 처리 방법에 대해 설명해주세요.
- JavaScript의 프로토타입(Prototype)과 프로토타입 체인에 대해 설명해주세요.
- JavaScript의 가비지 컬렉션(Garbage Collection) 동작 방식에 대해 설명해주세요.
- JavaScript의 debounce와 throttle의 차이점과 사용 사례를 설명해주세요.