[JavaScript] this가 무엇인가요? (면접질문)

답변

this는 함수가 호출될 때 자신이 속하게 될 객체를 가리키는 특별한 키워드입니다.
함수의 선언 위치에 따라 스코프가 정적으로 결정되는 렉시컬 스코프와 달리, this는 함수가 ‘어떻게’, ‘어디서’ 호출되었는지에 따라 동적으로 바인딩 되는 것이 특징입니다. 따라서 같은 함수라도 호출 방식에 따라 this가 가리키는 객체는 달라집니다.

---

키워드 설명

• this는 렉시컬 스코프가 아니다.
  • 스코프는 선언 위치로 결정
  • 하지만 this는 호출 시점에 결정 → dynamic binding
• this 바인딩 4가지 규칙
  1. 기본 바인딩 (Default Binding)
     • 그냥 func() 호출
     • non-strict → window
     • strict → undefined
  2. 암시적 바인딩 (Implicit Binding)
     • obj.func()처럼 객체가 “호출 주체”일 때
     • this = obj
  3. 명시적 바인딩 (Explicit Binding)
     • call , apply , bind 로 this를 강제 지정
     • call/apply → 호출 시점에만 적용
     • bind → this가 영구적으로 고정된 새로운 함수 반환
  4. new 바인딩 (Constructor Binding)
     • new Foo()
     • this는 새로 생성된 인스턴스를 가리킴
• 화살표 함수의 this(Lexical this)
  • 화살표 함수는 자신만의 this를 가지지 않음
  • 따라서 선언된 위치의 상위 스코프 this(lexical this)를 그대로 사용
  • 호출 방식(call/apply/bind)으로도 바뀌지 않음
• setTimeout 내부에서 this가 깨지는 이유
  • 일반 함수 사용 시, 콜백을 브라우저가 단독 함수 호출(callback())형태로 실행
  • 화살표 함수 사용 시, this는 say()의 this = user로 고정

---

자료

우선순위	규칙	예시
1	new 바인딩	new Foo()
2	bind 바인딩(명시적)	foo.bind(obj)
3	call/apply 바인딩(명시적)	foo.call(obj)
4	암시적 바인딩	obj.foo()
5	기본 바인딩	foo()

---

꼬리질문

1. this는 렉시컬 스코프인가요?
   • 아니요.
   • 자바스크립트의 this는 렉시컬 스코프가 아니라, 호출 방식에 따라 동적으로 결정되는 값입니다
   • 렉시컬 스코프는 선언 위치로 스코프가 고정되지만, this는 어떻게 호출되었는지에 따라 달라집니다.
2. 화살표 함수는 왜 lexical this를 갖나요?
   • 화살표 함수는 자신만의 this 바인딩을 만들지 않도록 설계된 문법입니다.
   • 따라서 호출 방식과 관계없이, 선언된 위치의 상위 스코프 this를 그대로 사용합니다.
   • 이것은 콜백 내부에서 this가 자주 깨지던 문제를 해결하기 위한 ES6의 의도입니다.
3. setTimeout 안에서 this가 왜 window로 떨어지나요?
   • 일반 함수로 콜백을 전달할 경우, 브라우저(Web API)가 이 콜백을 단독 함수 호출 형태로 실행하기 때문입니다.
   • 단독 호출은 기본 바인딩 규칙을 적용하므로, this는 window(또는 strict 모드에서는 undefined)가 됩니다.
   • 이를 방지하기 위해 화살표 함수나 bind를 사용해 this를 고정할 수 있습니다.