자바스크립트 this 키워드에 대해서 알아보겠습니다. 이 키워드는 경우에 따라서 가리키는 대상이 다릅니다.
- 일반 함수 호출 시에는 전역 객체를 가리킵니다. 즉, window 객체를 가리킵니다.
- 메서드 호출 시에는 메서드를 호출한 객체를 가리킵니다.
한 가지 기억해야 하는 점은 this keyword는 해당 키워드가 정의된 함수/메서드가 실제로 호출될 때까지는 값이 할당되지 않는다는 것입니다.
콘솔을 열고 this 키워드를 출력해보면 다음과 같이 window 객체를 확인할 수 있습니다.
console.log(this);
일반 함수 안에서 호출하면 무엇을 가리키는지 보겠습니다.
function greeting(name) {
console.log(`안녕하세요. 저는 {name}입니다.`);
console.log(this);
}
greeting('Jack');
일반 함수 안에서 호출되었기 때문에 앞서 얘기한 것처럼 window 객체를 가리킵니다. 이 함수가 붙어있는 객체가 전역 객체인 window인 점을 생각하면 당연한 결과 같습니다.
이번에는 객체를 하나 만들고 해당 객체의 메서드 안에서 this 키워드를 호출해 보겠습니다.
let person = {
name: 'Amy',
age: '28',
job: 'teacher',
greeting: function() {
console.log(this);
}
}
person.greeting();
이번에는 this 키워드가 메서드를 호출한 객체를 가리키는 것을 확인할 수 있습니다. 그렇기 때문에 this 키워드를 이용해서 이 객체의 프로퍼티에 접근할 수 있는 것입니다.
let person = {
name: 'Amy',
age: '28',
job: 'teacher',
greeting: function() {
console.log(`안녕하세요. 저는 ${this.name}입니다.`);
}
}
person.greeting();