23.10.20 (JS에서의)this

JavaScript에서 this 키워드는 실행 컨텍스트에 따라 현재 실행 중인 함수나 메서드의 "소유자"를 참조한다. 즉, this의 값은 어떻게 함수가 호출되었는지에 따라 달라진다.

 

전역 컨텍스트

• 전역 실행 컨텍스트에서 this는 전역 객체를 참조합니다.
• 브라우저에서 this는 window 객체를, Node.js에서는 global 객체를 가리킵니다.
  
  

함수 컨텍스트

1. 일반 함수 호출:
   • 일반적인 함수에서 this는 기본적으로 전역 객체를 참조합니다.
   • 엄격 모드('use strict';)에서는 this가 undefined로 설정됩니다.
     
     
2. 메서드 호출:
   • 객체의 메서드로서 함수가 호출될 때, this는 그 메서드를 호출한 객체를 참조합니다.
   • 예: obj.method()에서 this는 obj를 참조합니다.
     
     
3. 생성자 함수:
   • 생성자 함수에서 this는 새로 생성된 객체를 참조합니다.
   • 예: new MyFunction()에서 this는 새로 생성된 MyFunction 객체를 참조합니다.
     
     
4. call, apply, bind 메서드:
   • 이들 메서드를 사용하면 함수의 this 값을 명시적으로 설정할 수 있습니다.
   • call과 apply는 즉시 함수를 실행하며, bind는 this가 설정된 새로운 함수를 반환합니다.
     
     

화살표 함수

• 화살표 함수(() => {})는 자신의 this 값을 가지지 않습니다. 대신, 화살표 함수는 자신을 포함하고 있는 외부 함수의 this를 "상속"합니다.
• 이는 화살표 함수가 자신의 컨텍스트가 아닌, 렉시컬 컨텍스트(lexical context)를 기반으로 this를 결정한다는 것을 의미합니다.

 

this는 어떤 경우에 어떻게 될지 외워서 처리해야겠다. 그런데 call과 apply의 차이는 무엇일까라는 의문이 생겼다.

 

call과 apply

call 메서드는 함수에 인자를 개별적으로 전달하고, apply 메서드는 함수에 인자를 배열로 전달한다. 그래서 인자의 개수가 고정되어 있거나 인자가 없을 때는 call을 사용하기 편리하고, 인자의 개수가 변할 수 있거나 배열 형태로 이미 인자가 주어져 있을 때는 apply가 더 적합하다.