✨ this 참조 대상

모든 개별 사례에서 this가 어떤 객체를 참조하는지 일일이 암기하는 것은 비효율적이고 거의 불가능에 가깝다.

대신, this 값이 어떻게 결정되는지에 대한 핵심 규칙들을 이해하는 것이 훨씬 중요하고 효과적이다.

핵심 원칙: 일반 함수의 this 값은 함수가 **어떻게 호출되었는지(call-site)**에 따라 동적으로 결정된다.

1. 📌 this 결정 규칙 (암기 대신 이해해야 할 것)

다음은 this 바인딩을 결정하는 주요 규칙들이다. 이 규칙들의 우선순위도 존재한다 (new > 명시적 > 암시적 > 기본).

1. 🥇 new 바인딩 (new Binding):
   • 함수가 new 키워드와 함께 **생성자(Constructor)**로 호출될 때 적용된다.
   • this는 새로 생성된 객체 인스턴스를 참조한다.
   • 예시: const instance = new MyClass(); 호출 시 MyClass 생성자 내부의 this는 instance.
2. 🥈 명시적 바인딩 (Explicit Binding):
   • call(), apply(), bind() 메소드를 사용하여 함수를 호출할 때 적용된다.
   • this는 이 메소드들의 첫 번째 인자로 전달된 객체를 참조한다.
   • 예시: myFunction.call(myObject, arg1, arg2); 호출 시 myFunction 내부의 this는 myObject.
3. 🥉 암시적 바인딩 (Implicit Binding):
   • 함수가 객체의 메소드로서 호출될 때 적용된다 (. 또는 [] 접근자 사용).
   • this는 **메소드를 소유한 객체 (메소드를 호출한 객체)**를 참조한다. (점 . 앞의 객체)
   • 예시: myApp.start(); 호출 시 start 메소드 내부의 this는 myApp.
4. 🏅 기본 바인딩 (Default Binding):
   • 위 규칙들에 해당하지 않는 일반적인 함수 호출 시 적용된다 (독립 실행).
   • **엄격 모드 ("use strict";)**에서는 this가 undefined이다.
   • 비엄격 모드에서는 this가 전역 객체 (window - 브라우저, global - Node.js 환경 등)를 참조한다. (하지만 전역 객체 참조는 혼란을 야기할 수 있어 주의해야 함)
   • 예시: myFunction(); 단독 호출 시 (엄격 모드가 아니라면) this는 window.
5. ✨ (예외) 화살표 함수 (Arrow Functions):
   • 화살표 함수는 위의 모든 규칙을 따르지 않는다.
   • 화살표 함수는 자신만의 this를 가지지 않는다.
   • this는 자신을 감싸고 있는 가장 가까운 상위 스코프 (Lexical Scope)의 this 값을 그대로 물려받아 사용한다. 즉, 함수가 정의될 때 this가 결정된다.

2. 💾 결론: 규칙 이해가 핵심

각 코드가 실행될 때 어떤 this 바인딩 규칙이 적용되는지 판단할 수 있다면, this가 무엇을 참조할지 예측할 수 있다. 모든 상황을 외우는 대신, 이 **핵심 규칙 4가지 (+ 화살표 함수 예외)**를 명확히 이해하고 적용하는 연습을 하는 것이 JavaScript의 this를 정복하는 열쇠이다. 이는 단순히 암기하는 것보다 훨씬 유연하고 강력한 접근 방식이다.