[17] 자바스크립트 this 키워드

this 키워드의 기본적인 동작 (Method vs Function)

1. 객체의 메서드에서 this:
   • this는 메서드가 호출된 객체를 가리킵니다.
   • 예: audio.play()에서 this는 audio 객체를 참조합니다.
   • 출력 결과: {title: 'a', play: f}
2. 일반 함수에서 this:
   • 함수가 독립적으로 호출되면 this는 전역 객체(window 또는 Node.js 환경에서는 global)를 참조합니다.
   • 예: playAudio()에서 this는 window를 참조합니다.
   • 출력 결과: Window 객체.

 

 

---

생성자 함수에서 this

• 생성자 함수:
  • new 키워드로 호출되는 생성자 함수는 새로운 객체를 생성하며, 그 객체를 this가 참조합니다.
  • 예: new Audio('a') 호출 시 this는 {title: 'a'}를 참조합니다.
  • 출력 결과: Audio {title: 'a'}

 

---

메서드 내부의 함수와 this

this는 자바스크립트에서 함수의 호출 방식에 따라 값이 달라집니다.

1. 콜백 함수에서 this 문제:
   • 메서드 내부에서 호출된 일반 함수(예: forEach의 콜백)는 전역 객체(window)를 참조합니다.
   • 이유: 일반 함수의 this는 호출한 컨텍스트를 따르지 않기 때문입니다.
   • 예: audio.displayCategories() 실행 시 this.title이 undefined로 출력됩니다.
2. 해결 방법:
   • thisArg를 명시적으로 지정하거나(두 번째 파라미터), 화살표 함수를 사용합니다.
   • 화살표 함수는 상위 스코프의 this를 캡처합니다.

 

왜 this.title이 undefined로 출력될까요?

1. displayCategories 메서드:
   • audio 객체의 메서드이므로 this는 audio 객체를 참조합니다.
2. forEach의 콜백 함수:
   • 하지만, forEach의 콜백 함수는 일반 함수로 실행됩니다.
   • 일반 함수에서의 this는 호출 컨텍스트를 따릅니다.
   • 호출 컨텍스트가 설정되지 않으면, this는 **전역 객체(window 또는 global)**를 참조합니다.
   • 따라서 this.title은 undefined가 됩니다.

 

---

메서드 내부의 콜백 함수에서 this 문제를 해결하는 두 가지 방법이 있습니다.

방법 1: thisArg 전달하기
forEach와 같은 고차 함수는 두 번째 인자로 thisArg를 받을 수 있습니다. thisArg는 콜백 함수에서 사용할 this를 명시적으로 지정할 수 있게 해줍니다.

 

방법 2: 화살표 함수에서 this

• 화살표 함수:
  • 화살표 함수는 this를 렉시컬(Lexical) 컨텍스트로 바인딩합니다.
  • 즉, 화살표 함수 내부의 this는 상위 스코프의 this를 가리킵니다.
  • 예: audio.displayCategories()에서 화살표 함수를 사용하면 title: audio가 출력됩니다.