스프린터스 #22 this?

• 4월 22일(금)
  1. javascript ES6에 추가된 것은 무엇인가요?
  2. ES6에서 화살표 함수를 언제 쓰고 왜 쓰는지 설명해보세요
  3. TCP와 UDP의 차이점은 무엇인가요?
  4. 함수 호출 시에 this의 용법에 대해 아는대로 설명해보세요
  5. javascript는 싱글 스레드 언어인데, 싱글 스레드 언어의 특징에 대해 설명해보세요
  6. Webpack이 무엇인지 설명해보세요

1. this란 무엇인가

• 자바스크립트에서의 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다.

• this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로
  일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.

• 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다.

• 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다.

• 단, this가 가리키는 값(바인딩)은 함수 호출 방식에 의해 동적으로 결정된다.

• this에 대한 바인딩은 크게 전역과 지역으로 나눌 수 있다.

바인딩이란

• 식별자와 값을 연결하는 과정을 바인딩이라고 한다.
• 변수선언 또한 바인딩의 일종으로, 변수 이름과 확보된 메모리 공간의 주소를 바인딩하는 것이다.
• this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다.
• 일반 함수에서는 call, apply, bind 메소드를 사용하여 this가 가리키는 값을 바꿀 수 있다.

2. this 전역 바인딩

브라우저에서 : window라는 전역 객체를 참조한다.
Node.js에서 : global이라는 전역 객체를 참조한다.

3. this 지역 바인딩

함수 스코프 내에서의 바인딩을 의미한다.

함수는 전역 함수와 객체 안에서 선언되는 지역함수 = 메소드로 구분된다.

• 1. 그런데 전역에 선언된 일반 함수도 결국 window 전역 객체의 메소드다.
• 2. 즉, 모든 함수는 객체 내부에 있는 것이다.
• 3. this는 현재 함수를 실행하고 있는 객체를 참조하기에 전역에서는 window, 그리고 지역에서는 함수를 호출하는 방법에 따라 동적으로 값이 바뀐다.

4. arrow 화살표 함수에서의 this

• 화살표함수 안의 this는 일반 함수들과는 달리 생성시에 정적으로 결정되어 언제나 부모를 가리킨다. 이를 렉시컬환경과 유사하다고 해서 렉시컬 this라고 한다.
• 화살표함수에서는 call, apply, bind 메소드를 사용할 수 없다.

5. 호출시 this가 가지는 값의 바리에이션

• 전역 형태인 window가 있다.
• 생성자 함수로 new 연산자를 사용해서 빈 객체를 참조하게 만들 수 있다.
• 객체를 만들고 객체 내 메소드함수를 만들어서 해당 객체를 참조하게 만들 수 있다.
• 객체 내에서 고차함수(배열같은거) 쓰면 해당 객체가 아닌 전역을 참조해버리니까 함수 뒤에 인자를 같이 전달해주자.
• es5의 스트릭모드 일때 일반 함수 내부의 this는 undefinded로 바인딩 된다.

this는 참조이다. this를 잘 쓰자!