8. 호출 패턴과 this 바인딩
- 함수 호출 시 기존 매개변수로 전달되는 인자값에 더해 "arguments"객체 및 this 인자가 함수 내부로 전달된다.
- this 는 함수가 호출되는 방식에 따라 다른 객체를 참조한다.
이 호출방식은 크게 4가지로 이루어져 있다.
(호출 방식에 따라 달라지는 this 바인딩)
- 여기서 설명 전에, 호출 방식에 따라 달라진다는 말을 이해해보자.
쉽게 국어로 설명해서 "나"라는 단어라고 이해하자.
내가 말할때 "나는 배고프다." 이 문장에서 "나"는 진짜 나를 가리키는 것이다.
하지만 아버지께서 "나는 배고프다." 라고 말할 경우, 이 문장에서 "나"는 아버지를 가리키는 단어가 된다.
이런 것 처럼 this가 호출 방식에 따라 달라진다는 말을 상황에 따라 달라지는 일종의 대명사 정도라고 생각하자.
(여기서 this는 거의 대부분의 상황에서 '객체'를 의미한다.)
8-(1) 객체의 메서드 호출 사용 시 this 바인딩.
- 메서드란? 객체의 프로퍼티가 함수일 경우를 메서드라고 한다.
- 이러한 메서드 호출 시 메서드 내부 코드에서 사용된 this 는 해당 메서드를 호출한 객체로 바인딩된다.
8-(2) 함수 호출 시 this 바인딩
- 결론부터 말하자면, 함수 내부 코드에서 사용한 this는 전역 객체에 바인딩된다.
- 브라우저에서 자바스크립트 실행 시 전역객체는 window 객체가 된다.
(Node.js였다면 전역객체는 window객체가 아닌 global 객체가 되었을 것이다.)
- 이는 내부함수 호출 시에도 그대로 적용된다.(window)
- 객체의 메서드 호출 후 그 메서드 안의 내부함수에서 this 를 사용하는 경우가 있다.
이럴 경우, 자바스크립트에서 내부함수 호출 패턴을 따로 정의해놓지 않았다.
다시말해, 내부함수도 결국 함수이므로, 이를 호출할 때는 함수호출로 취급한다는 뜻이다.
(전역객체 window에 바인딩된다는 뜻이다.)
말로는 이해하기 힘들테니 코드로 확인해보자.
예시)
댓글 영역