[JavaScript] 함수 호출 방식에 따라 달라지는 this 바인딩

개발견 배도르만·2023년 6월 12일
0

자바스크립트

목록 보기
1/1

1. 일반 함수 호출

일반 함수는 객체의 메서드로 정의되지 않은 경우에 해당합니다.
일반 함수 호출에서 this는 실행 컨텍스트에 따라 결정됩니다.
브라우저 환경에서는 전역 객체인 window를, Node.js 환경에서는 전역 객체인 global을 참조합니다.
이는 JavaScript의 초기 설계 결정으로 인한 것으로, 이전의 전역 스코프를 더 간단하게 접근하기 위한 방법으로 동작합니다.

2. 객체의 메서드 호출

객체의 메서드로 호출된 함수에서 this는 해당 메서드를 호출한 객체를 참조합니다.
객체의 메서드로 정의된 함수는 그 객체에 속하게 되므로, 해당 객체의 속성에 접근하거나 수정하는 등의 작업을 수행할 수 있습니다.
이는 객체 지향 프로그래밍의 일반적인 패턴으로, 메서드가 자신이 속한 객체와 상호작용하는데 사용됩니다.

3. 생성자 함수 호출

생성자 함수로 사용될 때 this는 생성된 객체를 참조합니다.
생성자 함수는 new 연산자와 함께 호출되며, this는 새로 생성된 객체를 가리킵니다.
이를 통해 생성자 함수에서 새로운 객체의 속성을 초기화하고 반환할 수 있습니다.

4. 화살표 함수

화살표 함수는 자체적인 this를 생성하지 않고 주변 컨텍스트의 this를 유지합니다.
화살표 함수의 this는 함수가 정의된 위치에서의 this를 상속받습니다.
주변 컨텍스트의 this를 유지하기 때문에, 주로 콜백 함수나 메서드 내에서 this를 일관되게 사용하기 위해 화살표 함수를 활용합니다.

5. call, apply, bind 메서드

call, apply, bind 메서드는 함수의 this 값을 명시적으로 설정하는 방법을 제공합니다.
call과 apply는 함수를 호출하면서 this 값을 지정한 객체로 설정하고, 인수를 전달하는 방식에 차이가 있습니다.
bind는 함수와 this 값을 바인딩하여 새로운 함수를 반환하며, 호출할 때 this 값을 설정합니다.
이를 통해 함수의 this를 원하는 객체로 설정하고 실행할 수 있습니다.

profile
네 발 개발 개

0개의 댓글