this

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. 따라서 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.

🧑🏻‍💻 암시적 바인딩과 명시적 바인딩

---

this와 this가 가리키는 객체의 연결(this 바인딩)은 함수 호출 방식에 의해 동적으로 결정된다. 물론 명시적으로 바인딩하는 방식도 있다.

✅ 암시적 바인딩

암시적 바인딩은 함수 호출 시 함수가 어떤 객체에 속해 있는지에 따라 this가 동적으로 결정되는 방식이다.

1. 일반 함수 호출
   → 기본적으로 this에는 전역 객체(window)가 바인딩된다.

   → strict mode 에서는 undefined가 바인딩된다.

   → 중첩 함수여도, 메서드 안 일반 함수로 호출 되어도 어떤 상황이든지 일반 함수로 호출되면 내부 this에는 전역 객체가 바인딩된다.

2. 메서드 호출

   → 메서드 내부의 this에는 메서드를 소유한 객체가 아닌, 메서드를 호출한 객체가 바인딩된다.

3. 생성자 함수 호출

   → 생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩된다.

✅ 명시적 바인딩

call, apply, bind를 사용한 함수 호출 시 this 값을 원하는 객체로 명시적으로 설정할 수 있다.

1. call 메서드

   → call 메서드는 함수를 호출할 때 this 값을 특정 객체로 지정하며, 함수의 인수를 각각 나열하는 방식으로 인수를 전달한다. call은 함수를 즉시 실행시킴으로써 this 값을 설정한다.

2. apply 메서드

   → apply 메서드 또한 함수를 호출할 때 this 값을 특정 객체로 지정하며, 함수의 인수를 배열로 전달한다. call과 달리 함수의 인수를 배열로 전달할 수 있어 유용하다.

3. bind 메서드

   → bind 메서드는 함수를 호출하는 것이 아니라, 새로운 함수를 생성합니다. 이 새로운 함수는 원본 함수와 동일한 동작을 하지만 this 값을 영구적으로 설정한다. bind를 사용하여 함수를 생성한 후 나중에 호출할 수도 있다.

---

참고 자료

• 모던 자바스크립트 Deep Dive (사진 출처)