JavaScript에서 this는 현재 실행 컨텍스트를 가리키는 키워드
this의 값은 함수가 호출되는 방식에 따라 동적으로 결정
주로 메서드가 속한 객체를 참조하는 데 사용
4가지 상황에서 각각 다르게 동작,
- 일반 함수 호출
- 메서드 호출
- 생성자 함수 호출
- 화살표 함수에서의 사용
this가 결정되는 상황
일반 함수 호출
function show() {
console.log(this);
}
show(); // window 객체 (브라우저 기준)
- 일반 함수로 호출될 때 this는 전역 객체를 가리킴. 브라우저에서는 window, Node.js에서는 global 객체
메서드 호출
const user = {
name: 'Kim',
greet() {
console.log(`Hello, ${this.name}`);
}
};
user.greet(); // "Hello, Kim"
- 객체의 메서드로 호출될 때 this는 해당 메서드를 소유한 객체를 가리킴
생성자 함수 호출
function User(name) {
this.name = name;
}
const user = new User('Kim');
console.log(user.name) // "Kim"
- new 키워드로 생성자 함수를 호출할 때 this는 새로 생성되는 객체를 가리킴
화살표 함수
const obj = {
name: 'Kim',
sayHi: () => {
console.log(this.name);
},
};
obj.sayHi(); // undefined
- 화살표 함수는 자신만의 this를 가지지 않고, 외부 스코프의 this를 그대로 상속
Ex. this 바인딩을 명시적으로 변경하는 방법
call(), apply(), bind() 메서드를 사용하여 this를 명시적으로 바인딩
- call(): 즉시 함수를 실행하며 인자를 쉼표로 구분하여 전달
- apply(): call과 유사하지만 인자를 배열로 전달
- bind(): 새로운 함수를 반환하며, 영구적으로 this가 바인딩
Ex. 화살표 함수를 사용할 때 주의할 점
화살표 함수는 자신만의 this 바인딩을 생성하지 않기 때문에, 객체의 메서드나 프로토타입 메서드로 사용하면 의도치 않은 동작이 발생할 수 있음
특히 이벤트 핸들러나 객체 메서드를 정의할 때는 일반 함수를 사용하는 것이 더 적절
실제 사용 예시
실제 개발에서는 주로 클래스의 메서드나 객체의 메서드에서 this를 활용
예를 들어 React 클래스 컴포넌트에서 이벤트 핸들러를 바인딩할 때나,
일반적인 객체지향 프로그래밍에서 인스턴스 메서드를 정의할 때 this를 자주 사용
'기술면접' 카테고리의 다른 글
클로저(Closure) (0) | 2024.10.02 |
---|---|
let, const, var의 차이점 (0) | 2024.10.02 |
프레임워크, 라이브러리 (0) | 2024.10.02 |
동기 처리, 비동기 처리 (0) | 2024.10.02 |
JavaScript의 객체지향 프로그래밍 (1) | 2024.10.02 |