2022/09/15 - TIL

오늘 공부한 것

---

오늘은, 면접 질문에 대해서 나올 수 있는 this에 관해 간단히 정리하려고 한다.

질문은 this란? this의 동작방식, call, apply, bind의 차이 세가지로 준비하려고 한다.

1. this란?

this는 호출하는 방법에 따라 다른 객체를 참조하는 키워드이다.

객체 본인을 나타내는 java와는 다르게 javascript는 호출 방법에 따라 동적으로 결정된다. 이러한 차이는 java는 클래스 기반의 OOP이고, javascript는 프로토타입을 기반의 OOP기 때문에 발생합니다.

클래스 기반의 OOP는 컴파일 할 때, 클래스의 틀을 복사합니다. 프로토타입 기반의 OOP는 런타임 과정에서 프로토타입 데이터 구조를 저장합니다. 프로토타입 기반의 OOP는 데이터 구조를 저장하기 때문에 렉시컬 스코프와 컨텍스트에 따라 프로토타입 체인을 다르게 탑니다. 따라서 자바스크립트는 다양한 문맥이 존재하는 프로토타입 기반의 자료구조이기 때문에 자바스크립트의 this 는 호출 방법에 따라 다른 객체를 참조합니다.

2. this의 동작 방식

this는

객체의 메소드에서는 객체를 참조한다. 단, 객체의 메소드 안의 일반함수는 전역 함수를 참조한다.

event handler에서는, this는 event에서 받은 element를 참조한다

화살표 함수는 자신의 상위 스코프를 참조한다.

new 키워드와 생성자 함수에 사용하면, 생성된 인스턴스의 객체를 참조한다. 생성자 함수 일지라도, 일반 함수로 호출되면 전역 객체를 참조한다.

call, appy, bind는 받는 인수 어느 것이든 참조할 수 있다

strict mode에서 this는 undefined이다.

일반 함수에서는 전역 객체를 참조한다.

혼자 사용되었다면, 전역 객체를 참조한다.

3. Call, Apply, Bind의 차이

Call은 첫 번째 인자로 this에 바인딩된 객체를 받고, 두 번째 인자부터 호출한 함수에 매개변수를 대입합니다.

Apply는 첫 번째 인자로 this에 바인딩된 객체를 받고, 두 번째 인자로, 함수에 넣을 매개변수를 배열로 받습니다.

Call과 Apply 바인딩을 하면서 동시에 호출을 하지만, bind의 경우 binding만하지 호출하지 않으며, this바인딩을 유지할 수 있습니다.