- .call과 .apply의 차이점은 무엇인가요?
- Function.prototype.bind을 설명하세요.
- this는 JavaScript에서 어떻게 작동하는지 설명해주세요.
- 자신이 속한 객체나 생성한 인스턴스를 가리키는 자기 참조 변수. (self-referencing variable)
- 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달.
- this 바인딩은 함수 호출 방식에 의해 동적으로 결정. 🚨 다른 클래스 기반 언어는 클래스가 생성하는 인스턴스를 항상 가리킴.
- this 바인딩 : 식별자와 값을 연결하는 과정.
- 전역에서 this는 window.
- strict mode일 때 일 반 내부함수 내에서는 undefined.
this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드(함수로 된 property)를 참조할 수 있다. -모던 자바스크립트 딥다이브 22장 this p343-
this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 값이 동적으로 결정된다. (또한, 엄격모드 역시 this 바인딩에 영향을 준다.)
| 함수 호출 방식 | this 바인딩 |
|---|---|
| 일반 함수 | window |
| 화살표 함수 | 상위 스코프의 this |
| 메서드 호출 | 메서드를 호출한 객체 |
| 생성자 함수 호출 | 생성한 인스턴스 |
| Function.prototype.apply/call/bind 메서드에 의한 간접 호출 |
인수에 의해 결정 |
화살표 함수는 간략하게 함수를 정의할 수 있다는 장점이 있다. 또한 내부 동작도 기존 함수보다 간략하다. 특히, 화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.
화살표 함수는 함수 자체의 this, arguments, super, new.target을 참조하면 스코프체인을 통해 상위 스코프의 this, arguments, super, new.target를 참조한다. 화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다. 따라서 화살표함수 내부에서 this를 참조하면 상위 스코프의 this를 그래도 참조한다. 이를 lexical this라 한다. 이는 마치 렉시컬 스코프와 같이 화살표 함수의 this가 함수가 정의된 위치에 의해 결정된다는 것을 의미한다.
- 문제 : 메서드의 this와 콜백 함수의 this가 일치하지 않는 경우가 있음.
- 해결 방법 : apply / call / bind 함수로 this 바인딩
this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로, 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. 그러므로 strict mode가 적용된 일반 함수 내부의 this에는 undefined가 바인딩된다. 일반함수 내부에서 this를 사용할 필요가 없기 때문이다.