this의 용법

this의 용법

this는 함수 호출 위치와 방식에 따라 다른 객체를 참조한다.
그렇다면, 각각은 어떤 객체를 참조하는지 알아보자.

---

📢 그 전에 알아야할 용어 정리

바인딩

• 프로그램의 특정 기본 단위가 가질 수 있는 구성요소의
  구체적인 값, 성격을 확정하는 것을 말한다.

  예) 변수의 이름, 자료형, 자료 값

EC

• 실행 컨텍스트(Execution Context)의 약자
• scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리.

new

• new는 자바스크립트의 고유의 예약어이며 + 고유의 연산자(operator).
• 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성하는 역할.
• 새로운 빈 인스턴스(객체)를 생성하는 것이 중요.

call

• 사용 시, 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this를 바인딩.

apply

• call과 동일하게, 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this를 바인딩.
• call과 다르게, 인자를 배열의 형태로 전달.
  이 때, 인자로 배열 자체가 전달되는 것이 아니라, 배열의 요소들이 값으로 전달.

bind

• call과 동일하게, 함수의 첫 번째 인자에 this를 바인딩.
• 함수를 실행하지 않으며 새로운 함수를 반환.
  즉, 반환된 새로운 함수를 실행해야 원본 함수가 실행 됨.

---

this로 바인딩되는 객체

실행 컨텍스트(EC)가 생성될 때마다 this의 바인딩이 일어나며,
다음과 같이 방식에 따라 바인딩되는 객체가 달라진다.

1. 기본적으로 바인딩되는 객체 = window
   • 일반 함수 내에서 혼자 this를 선언하면, 그 this는 window 객체를 가르킴.
   • 이 때, strict mode인 경우에는 undefined로 초기화 된다.
   • 내부함수는 메소드, 콜백함수 어디에서 선언되어도 기본적인 전역 객체 window를 바인딩.
2. new를 사용했을 때, 바인딩되는 객체 = 해당 객체
   • 기존 함수에 new 연산자를 붙여서 호출하면 생성자 함수로 동작.
   • 따라서, 해당 생성자로 생성된 객체가 바인딩된 것이다.
3. 객체의 메소드를 호출할 때, 바인딩되는 객체 = 해당 메소드를 소유한 객체
   • 함수는 객체의 속성이면 -> 메소드로 호출됨
   • 이 때, 메소드 내부의 this는 해당 메소드를 소유한 객체에 바인딩 된다.
4. call, apply, bind를 호출할 때, 바인딩되는 객체 = 인자로 전달된 객체
   • 각각 함수의 첫번째 인자로 전달하는 값에 바인딩 된다.

---

✨ 출처

blog, 바인딩(Binding)
JS📚, 자바스크립트 실행 컨텍스트 원리
초보자를 위한 Javascript: ‘new’ 예약어
blog, 자바스크립트 call,apply,bind