this

• 자바스크립트에서 this는 어디서나 사용될 수 있다.

상황에 따라 달라지는 this

• 실행 컨텍스트(실행할 코드에 제공할 환경 정보들을 모아놓은 객체) 안에 존재하는 3가지

  • VariableEnvironment
  • LexicalEnvironment
  • ThisBindings

• this는 함수를 호출할 때 결정된다.(=실행 컨텍스트가 생성될 때)

전역공간에서의 this

1. 노드에서는 global 객체
2. 브라우저에서는 window 객체

메서드로서 호출할 때 그 메서드 내부에서의 this

• 함수 vs 메서드

  • 함수와 메서드는 비슷해보이지만 독립성이 다른다.

  • 함수는 그 자체로 독립적인 기능을 수행한다.

  • 하지만 메서드는 자신을 호출한 대상 객체에 대한 동작을 수행한다. → 실행의 주체가 있어야 한다.

    함수에서 this → 전역 객체 (호출의 주체를 명시할 수 없기 떄문에)

    메서드에서 this → 호출의 주체 명시할 수 있기 때문에 해당 객체

    this의 할당

함수로서 호출할 때 그 함수 내부에서의 this

복습하고 적기

this 우회 방법

메서드 내부 함수에서의 this 우회

1. 변수 활용

   • 내부 스코프에 이미 존재하는 this를 별도의 변수에 할당하는 방법

2. 화살표 함수

• this를 바인딩하지 않는 함수이다.
• 실행 컨텍스트를 생성할 때 바인딩 과정 자체가 없다.
• 일반 함수와 화살표 함수의 가장 큰 차이점은 this binding 여부라고 할 수 있다.

콜백 함수 호출 시 그 함수 내부에서의 this

• 콜백 함수 : 어떠한 함수, 메서드의 인자로 넘겨주는 함수
• 콜백함수 내부의 this는 해당 콜백함수를 넘겨받은 함수(메서드)가 정한 규칙에 따라 값이 결정된다.
• 콜백함수도 함수기 때문에 thos는 전역 객체를 참조한다.
• 하지만 콜백함수에 별도로 this를 지정한 경우는 예외 (addEventListener)

생성자 함수 내부에서의 this

• 생성자 : 구체적인 인스턴스를 만들기 위한 일종의 틀
• 여기서의 this는 항상 인스턴스를 지칭한다고 봄
• 새로운 인스턴스를 만들때마다 this는 달라진다

명시적 this 바인딩

1. call 메서드 (호출 주체인 함수를 즉시 실행하는 명령어)

2. apply 메서드 (call 메서드와 완전히 동일하지만 나머지 부분을 배열 형태로 넘겨줘야한다.[] )

3. call / apply 메서드활용

   1. 유사 배열 객체에 배열 메서드 적용
   • 유사 배열 객체 : 배열과 유사한 형태의 객체. 반드시 length가 있어야하고 index번호가 0부터 시작해서 1씩 증가해야한다.

   b. Array.from 메서드

   • call,apply를 통해서 this binding을 하는 게 아니라 객체 → 배열로서의 형 변환만을 위해서도 쓸 수 있다.

   // 유사배열
   var obj = {
   	0: 'a',
   	1: 'b',
   	2: 'c',
   	length: 3
   };
   
   // 객체 -> 배열
   var arr = Array.from(obj);
   
   // 찍어보면 배열이 출력.
   console.log(arr);

c. 상위 컨텍스트의 this를 내부함수나 콜백함수에 전달하기

• 변수를 활용한 우회법보다 call, apply,bind를 사용하면 깔끔하게 처리 가능

• 화살표 함수는 실행 컨텍스트 생성시, this를 바인딩하는 과정이 제외된다.

• this가 전역 객체로서 새롭게 세팅되는 케이스가 없다.

• this우회, call, apply,bind 보다 편리한 방법

유지보수나 레거시(이미 존재해서 물려내려오고 있는 코드)를 볼 때 해석할 수 있는 역량이 필요하기 때문에 여러 기법을 알아두는 것이 도움이 된다.

정리

1. 함수를 일반 함수로 호출할 때: this는 전역 객체를 가리킨다.
2. 메서드로 호출할 때: this는 해당 메서드를 소유한 객체를 가리킨다.
3. 생성자 함수로 호출할 때: this는 생성된 인스턴스를 가리킨다.
4. call()이나 apply()로 호출할 때: this는 인수로 전달된 객체를 가리킨다.
5. 화살표 함수에서 호출할 때: this는 함수가 정의된 곳의 this를 그대로 사용한다.