This와 명시적 This 바인딩

This

1. 자바스크립트에서의 this는 무엇인가요?
   • class가 없는 JS(ES6이전, ES6부터는 class 외)에서 class처럼 자신만의 속성을 주기 위해 this 사용? → 함수 객채 내에서의 현재의 실행 컨텍스트를 참조하는 키워드
   • by GPT
     1. 동적 객체 참조: this를 사용하면 동일한 함수가 다양한 객체에서 호출되더라도 그 객체를 참조하도록 함으로써 코드 재사용성을 높일 수 있습니다.
     2. 객체의 컨텍스트 유지: 메서드나 이벤트 핸들러 등에서 객체 내부의 데이터를 사용할 때 this를 통해 객체 자체에 대한 참조를 유지할 수 있습니다.
     3. 객체 지향 스타일: this는 생성자 함수나 클래스에서 객체의 속성이나 메서드를 쉽게 참조할 수 있게 하여 객체 지향 프로그래밍을 가능하게 해줍니다.
   • this를 사용하는 이유
2. this의 특징
   • 상황에 따라 달라진다
   • 함수를 호출할 때 결정된다 : 실행 컨텍스트 자체가 함수를 호출할 때 생성됨.
3. 전역 공간에서의 this가 가리키는 것
   • 전역 객체를 가리킨다. (브라우저에서는 window, Node.js에서는 global)
4. 메소드 내부에서의 this 가 가리키는 것
   • 메서드 호출 주체
5. 함수 내부에서의 this가 가리키는 것
   • 전역 객체
6. 화살표 함수의 특징
   • 메서드 내부 등 this가 전역객체가 아닐 때, 그 내부에서 함수를 생성해서 this를 출력하도록 하면 전역 객체를 출력해서 불편한 상황을 연출함
   • 이런 문제를 해결하기 위해 this바인딩 과정을 생략함 : 상위 스코프의 this를 참조함
7. 콜백 함수 내부에서의 this가 가리키는 것
   • 콜백 함수도 함수이므로 기본적으로 전역 객체를 참조하지만, 별도로 바인딩되어있다면 그 대상을 참조함.
   • addEventListener처럼 해당 HTML 요소로 this를 바인딩해주는 함수도 있음.
8. 생성자 함수 내부에서의 this가 가리키는 것
   • 자기 자신 (class처럼)
   • new 를 사용함으로써 함수가 클래스처럼 동작함. 그 생성자 함수의 인스턴스 그 자체(= 자기자신)

명시적 this 바인딩

1. 명시적 this 바인딩이 필요한 이유
   • 메서드 내부 등 this가 전역객체가 아닐 때, 그 내부에서 함수를 생성해서 this를 출력하도록 하면 전역 객체를 출력하는 불편한 상황을 해결할 수 있음
   • 명시적 this 바인딩으로 직접 제어할 수 있다.
2. call 메서드와 apply 메서드 차이
   • 인자 전달 방식의 차이 call메서드는 제일 처음 인자를 this로 바인딩하고, 이후 인자들을 함수의 매개변수로 가지고 있다. apply 메서드의 경우에는 두번째 인자값 부터 배열로 받아 요소를 호출할 함수의 매개변수로 활용
3. bind 메서드의 특징
   • call 메서드와 사용방법은 동일하지만, 실행하지 않고 함수를 반환함.
   • 함수의 인자를 안 받거나, 일부만 받을 수 도 있다.
4. 상위 컨텍스트의 this를 내부함수나, 콜백함수로 전달할 수 있는 방법
   • 실행 위치에서 call/apply 메서드를 사용하거나, 정의할 때 bind 메서드를 사용
5. 콜백 함수 내에서의 this
   • callback 인자로 받은 메서드 중 일부는 추가로 this로 지정할 객체를 인자로 지정할 수 있는 경우가 있음.
6. call/apply 메서드 활용하는 경우 예시
   • 유사배열객체에 활용
     • 객체형식으로 된 배열(유사배열객체)에 배열 메서드를 적용할 수 있음
   • 생성자 내부에서 다른 생성자 호출
     • 내부 생성자의 인스턴스 속성을 정의할 수 있음
     • ES6 이전에는 class 대신 3-21 번 예제처럼 사용을 했음. extends를 통해 사용 가능

 

출처 : 코어 자바스크립트