- 4월 22일(금)
- javascript ES6에 추가된 것은 무엇인가요?
- ES6에서 화살표 함수를 언제 쓰고 왜 쓰는지 설명해보세요
- TCP와 UDP의 차이점은 무엇인가요?
- 함수 호출 시에 this의 용법에 대해 아는대로 설명해보세요
- javascript는 싱글 스레드 언어인데, 싱글 스레드 언어의 특징에 대해 설명해보세요
- 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 지역 바인딩
함수 스코프 내에서의 바인딩을 의미한다.
함수는 전역 함수와 객체 안에서 선언되는 지역함수 = 메소드로 구분된다.
- 그런데 전역에 선언된 일반 함수도 결국 window 전역 객체의 메소드다.
- 즉, 모든 함수는 객체 내부에 있는 것이다.
- this는 현재 함수를 실행하고 있는 객체를 참조하기에 전역에서는 window, 그리고 지역에서는 함수를 호출하는 방법에 따라 동적으로 값이 바뀐다.
4. arrow 화살표 함수에서의 this
- 화살표함수 안의 this는 일반 함수들과는 달리 생성시에 정적으로 결정되어 언제나 부모를 가리킨다. 이를 렉시컬환경과 유사하다고 해서 렉시컬 this라고 한다.
- 화살표함수에서는 call, apply, bind 메소드를 사용할 수 없다.
5. 호출시 this가 가지는 값의 바리에이션
- 전역 형태인 window가 있다.
- 생성자 함수로 new 연산자를 사용해서 빈 객체를 참조하게 만들 수 있다.
- 객체를 만들고 객체 내 메소드함수를 만들어서 해당 객체를 참조하게 만들 수 있다.
- 객체 내에서 고차함수(배열같은거) 쓰면 해당 객체가 아닌 전역을 참조해버리니까 함수 뒤에 인자를 같이 전달해주자.
- es5의 스트릭모드 일때 일반 함수 내부의 this는 undefinded로 바인딩 된다.
this는 참조이다. this를 잘 쓰자!