JavaScript this Keyword
JavaScript this
Keyword: 동작 원리와 다양한 사용 사례
JavaScript의 this
키워드는 함수가 호출되는 **맥락(context)**에 따라 달라지는 참조를 나타냅니다. 이는
현재 실행 중인 코드에서 객체의 속성이나 메서드에 접근할 수 있도록 도와줍니다. **this
**는 동적으로 결정되며, 함수가 어떻게
호출되었는지에 따라 참조하는 대상이 달라집니다.
이 가이드는 JavaScript에서 this
키워드가 어떻게 동작하는지, 그리고 다양한 상황에서 **this
**가 가리키는 객체가
무엇인지 설명합니다.
1. this
의 기본 개념
JavaScript에서 **this
**는 함수가 호출될 때 자동으로 생성되는 특수한 객체를 참조합니다.
this
는 함수가 어떤 방식으로 호출되었는지에 따라 다르게 동작하며, 전역 객체, 객체
메서드, 생성자 함수 등에서 각기 다른 대상을 참조할 수 있습니다.
1.1. 기본적인 this
사용
function showThis() {
console.log(this);
}
showThis(); // 출력: 전역 객체 (브라우저 환경에서는 window)
2. this
의 동작 방식
this
가 가리키는 대상은 호출 방법에 따라 다르게 동작합니다. 주요 동작 방식을 살펴보겠습니다.
2.1. 전역 스코프에서의 this
전역 스코프에서 **this
**는 전역 객체를 가리킵니다. 브라우저 환경에서는 window
객체, Node.js에서는
global
객체를 참조합니다.
console.log(this); // 출력: window (브라우저 환경)
2.2. 객체 메서드에서의 this
객체의 메서드 내부에서 **this
**는 해당 메서드를 소유한 객체를 참조합니다.
const person = {
name: "Alice",
greet: function() {
console.log(this.name); // this는 person 객체를 참조
}
};
person.greet(); // 출력: Alice
여기서 **this.name
**은 person
객체의 name
속성에 접근합니다.
2.3. 생성자 함수에서의 this
생성자 함수에서 **this
**는 새로 생성되는 객체를 가리킵니다. 생성자 함수는
new
키워드를 사용해 객체를 만들 때 호출됩니다.
function Person(name) {
this.name = name;
}
const alice = new Person("Alice");
console.log(alice.name); // 출력: Alice
new
키워드로 생성된 객체 내부에서 this
는 새로 생성된 객체 **alice
**를 참조합니다.
2.4. call()
, apply()
, bind()
를 사용한 this
설정
call()
, apply()
, bind()
메서드를 사용하면 this
를 수동으로 설정할 수 있습니다. 이를 통해 함수가 호출될 때 this
가 참조할
객체를 지정할 수 있습니다.
2.4.1. call()
사용
call()
메서드는 함수를 호출할 때 this
를 명시적으로 설정합니다.
function greet() {
console.log(`Hello, ${this.name}`);
}
const person = { name: "Alice" };
greet.call(person); // 출력: Hello, Alice
2.4.2. apply()
사용
apply()
는 call()
과 비슷하지만, 매개변수를 배열로 전달한다는 점이 다릅니다.
function greet(greeting) {
console.log(`${greeting}, ${this.name}`);
}
const person = { name: "Bob" };
greet.apply(person, ["Hi"]); // 출력: Hi, Bob
2.4.3. bind()
사용
bind()
는 함수의 this
를 영구적으로 설정한 새 함수를 반환합니다. 즉, 호출하지 않고 새로운
함수를 반환한 후, 나중에 그 함수를 호출할 수 있습니다.
function greet() {
console.log(`Hello, ${this.name}`);
}
const person = { name: "Charlie" };
const boundGreet = greet.bind(person);
boundGreet(); // 출력: Hello, Charlie
3. 함수 내부의 this
3.1. 일반 함수에서의 this
일반 함수에서 **this
**는 전역 객체를 참조합니다. 이 경우 this
는 전역 객체인 window
(브라우저
환경)나 global
(Node.js 환경)을 가리킵니다.
function showThis() {
console.log(this);
}
showThis(); // 출력: window (브라우저 환경)
3.2. 화살표 함수에서의 this
화살표 함수에서는 this
가 자신을 감싸고 있는 스코프의 this
를 상속합니다. 즉, 화살표 함수
내부의 this
는 외부 함수나 객체의 this
와 동일합니다.
const person = {
name: "Daisy",
greet: function() {
const innerFunc = () => {
console.log(this.name); // this는 외부 함수의 this를 상속
};
innerFunc();
}
};
person.greet(); // 출력: Daisy
위 예시에서 화살표 함수는 **person
객체의 this
**를 상속받아 this.name
이
**person.name
**을 참조하게 됩니다.
4. 클래스에서의 this
JavaScript의 클래스는 프로토타입 기반 객체지향 프로그래밍을 단순화한 문법입니다. 클래스 내부의 메서드에서
**this
**는 해당 클래스로 생성된 인스턴스를 참조합니다.
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, ${this.name}`);
}
}
const person = new Person("Eve");
person.greet(); // 출력: Hello, Eve
위 예시에서 클래스의 메서드 내부의 **this
**는 클래스 인스턴스인 person
을 참조합니다.
5. 이벤트 핸들러에서의 this
HTML 이벤트 핸들러 내부의 **this
**는 이벤트가 발생한 DOM 요소를 가리킵니다.
<button id="myButton">Click me</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
console.log(this); // 출력: 클릭된 버튼 요소
});
</script>
이벤트 핸들러의 일반 함수에서 this
는 이벤트가 발생한 DOM 요소(button
)를 참조합니다.
5.1. 화살표 함수와 이벤트 핸들러
화살표 함수 내부에서 **this
**는 외부 스코프를 참조하기 때문에, DOM 요소가 아닌 **상위 스코프의 this
**를
참조합니다.
<button id="myButton">Click me</button>
<script>
document.getElementById("myButton").addEventListener("click", () => {
console.log(this); // 출력: 전역 객체 (브라우저 환경에서는 window)
});
</script>
6. this
사용 시 주의사항
- 화살표 함수는
this
를 상속하므로, 일반 함수처럼this
를 동적으로 바인딩하지 않습니다. 화살표 함수 내부에서this
가 필요하면, 상위 스코프에서 참조를 가져옵니다. call()
,apply()
, **bind()
*를 통해this
를 명시적으로 설정할 수 있습니다.- 이벤트 핸들러에서
this
는 이벤트가 발생한 요소를 가리키지만, 화살표 함수를 사용하면 주의가 필요합니다.
요약
- *
this
*는 함수 호출 방식에 따라 다르게 동작하며, 일반적으로 객체나 함수의 실행 문맥을 참조합니다. - 전역 스코프에서
this
는 전역 객체를 참조하며, 메서드에서는 메서드를 호출한 객체를 참조합니다. - 화살표 함수에서는 **외부 스코프의
this
*를 상속하며, 생성자 함수에서는 새로 생성된 객체를 가리킵니다. call()
, **apply()
- *, **
bind()
*를 사용하면 함수 호출 시this
를 명시적으로 설정할 수 있습니다. - 이벤트 핸들러에서는
this
가 이벤트가 발생한 DOM 요소를 참조합니다.
this
키워드의 동작을 이해하면 JavaScript 코드의 가독성과 유연성을 높이고, 함수의 실행
문맥을 정확하게 제어할 수 있습니다.