this 바인딩
JavaScript에서 this가 어떤 객체를 가리킬지 함수 호출 방식에 따라 결정되는 규칙입니다.
핵심 특징
- 호출 시점 결정: 일반 함수의
this는 함수가 선언된 위치보다 호출 방식의 영향을 받음 - 메서드 호출:
obj.method()처럼 호출하면this는obj - 생성자 호출:
new로 호출하면this는 새로 생성되는 인스턴스 - 명시적 바인딩:
call,apply,bind로this를 직접 지정 가능 - 화살표 함수: 자체
this를 만들지 않고 상위 스코프의this를 캡처
일반 함수 호출
function printThis() {
console.log(this);
}
printThis();
브라우저의 non-strict mode에서는 전역 객체인 window를 가리킬 수 있습니다. strict mode에서는 undefined가 됩니다.
메서드 호출
const user = {
name: "Alice",
greet() {
console.log(this.name);
},
};
user.greet(); // Alice
점 앞의 객체가 호출 주체가 되므로 this는 user를 가리킵니다.
생성자와 클래스
class User {
constructor(name) {
this.name = name;
}
}
const user = new User("Alice");
new로 호출하면 this는 새로 만들어지는 인스턴스를 가리킵니다.
call, apply, bind
function greet() {
console.log(this.name);
}
const user = { name: "Alice" };
greet.call(user);
const bound = greet.bind(user);
bound();
call과 apply는 즉시 호출하면서 this를 지정하고, bind는 this가 고정된 새 함수를 반환합니다.
화살표 함수
const user = {
name: "Alice",
greet: () => {
console.log(this.name);
},
};
화살표 함수는 자체 this가 없기 때문에 메서드의 this가 필요한 위치에는 적합하지 않을 수 있습니다. 대신 콜백에서 외부 this를 유지하고 싶을 때 유용합니다.
핵심 정리
this는 일반 함수에서는 호출 방식으로 결정되고,
화살표 함수에서는 상위 스코프에서 결정됩니다.
객체 메서드, 이벤트 핸들러, 콜백에서 this가 달라질 수 있으므로
필요하면 bind나 화살표 함수를 의도적으로 선택해야 합니다.