this 키워드란 무엇인가요?
호출 방식에 따라 달라지는 this의 4가지 바인딩 규칙과 화살표 함수의 렉시컬 this를 정리합니다.
this는 함수가 어떻게 호출되었는지에 따라 가리키는 대상이 달라지는 키워드입니다. 정의된 위치가 아니라 호출 시점의 방식으로 결정된다는 점이 핵심입니다(화살표 함수는 예외).
4가지 기본 바인딩 규칙
// 1. 일반 함수 호출 → 전역 객체(strict 모드에서는 undefined)
function f() {
console.log(this);
}
f(); // window / undefined
// 2. 메서드 호출 → 점(.) 앞의 객체
const obj = {
name: '단북',
greet() {
return this.name;
},
};
obj.greet(); // '단북' — this는 obj
// 3. new로 생성자 호출 → 새로 만들어진 인스턴스
function User(name) {
this.name = name;
}
const u = new User('단북'); // this는 새 객체
// 4. call/apply/bind로 명시적 바인딩
function greet() {
return this.name;
}
greet.call({ name: '명시적' }); // '명시적'규칙의 우선순위는 대략 new > call/apply/bind > 메서드 호출 > 일반 호출 순입니다.
흔한 함정: this를 잃어버리는 경우
메서드를 변수에 떼어내 호출하거나 콜백으로 넘기면, “점 앞의 객체”가 사라져 this가 바뀝니다.
const obj = {
name: '단북',
greet() {
return this.name;
},
};
const fn = obj.greet;
fn(); // undefined — 일반 호출이 되어 this가 obj가 아님화살표 함수의 렉시컬 this
화살표 함수는 자신만의 this를 갖지 않고, 정의된 위치의 바깥 this 를 그대로 사용합니다. 그래서 콜백 안에서 바깥 this를 유지하고 싶을 때 유용합니다.
const obj = {
name: '단북',
items: [1, 2],
print() {
this.items.forEach((n) => {
console.log(this.name, n); // 화살표라 this는 print의 this(obj) 유지
});
},
};
obj.print(); // '단북' 1 / '단북' 2다음 코드의 결과로 가장 알맞은 것은?
const o = { v: 1, get() { return this.v; } };
const g = o.get;
g();이 레슨을 다 읽으셨나요?
완료 표시는 이 브라우저에 저장됩니다.