JavaScript this 키워드란?
JavaScript의 this 키워드는 자신이 속한 객체를 참조하는 특수한 식별자입니다. 중요한 점은 this가 고정된 값을 가지는 것이 아니라, 사용되는 위치(호출 문맥)에 따라 가리키는 대상이 달라진다는 것입니다.
- 단독으로 사용하거나 일반 함수 내부 → 전역 객체(브라우저 환경에서는
window)를 가리킵니다. - 객체의 메서드 내부 → 해당 메서드를 소유한 객체를 가리킵니다.
- 이벤트 리스너 내부 → 이벤트를 수신한 HTML 요소를 가리킵니다.
문맥별 this 정리
| 사용 문맥 | this가 가리키는 대상 |
|---|---|
| 단독 사용 / 일반 함수 호출 | 전역 객체 (window) |
| 객체의 메서드 내부 | 메서드를 소유한 객체 |
| 이벤트 리스너 (일반 함수) | 이벤트를 받은 HTML 요소 |
| 화살표 함수(Arrow Function) | 자체 this가 없으므로 외부 스코프의 this를 상속 |
참고: 엄격 모드(strict mode)에서는 일반 함수 호출 시 this가 전역 객체 대신
undefined가 됩니다.
예제 코드
다음 코드는 서로 다른 문맥에서 this가 어떤 객체를 참조하는지 실습하는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript this Identifier</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to see which object 'this' refers to in multiple
context
</h3>
<script>
let thisRef = this;
let sampleEle = document.querySelector(".sample");
function test() {
return this;
}
let testObj = {
a: 22,
check() {
return this;
},
};
document.querySelector(".Btn").addEventListener(
"click",
() => {
sampleEle.innerHTML = "This inside normal function = " + test() + "<br>";
sampleEle.innerHTML += "This inside a method = " + testObj.check() + "<br>";
sampleEle.innerHTML += "This without any scope = " + thisRef + "<br>";
},
false
);
</script>
</body>
</html>
코드 설명
let thisRef = this;— 최상위 스코프에서 this는 전역 객체(window)를 가리키므로, thisRef에는 window 객체가 저장됩니다.test()— 일반 함수로 호출되었기 때문에 함수 내부의 this는 전역 객체를 반환합니다.testObj.check()— 객체의 메서드 형태로 호출되었기 때문에 this는 testObj 자신을 반환합니다.- 버튼의 click 이벤트 핸들러는 화살표 함수로 작성되었습니다. 화살표 함수는 자체적인 this 바인딩을 갖지 않아 외부 스코프의 this(여기서는 전역 객체)를 그대로 사용합니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 나타납니다.
"CLICK HERE" 버튼을 클릭하면, 각 문맥에서 this가 참조하는 객체가 아래와 같이 화면에 출력됩니다.
결과를 보면 일반 함수 호출과 최상위 스코프의 this는 모두 [object Window](전역 객체)를, 메서드 내부의 this는 [object Object](testObj)를 가리키는 것을 확인할 수 있습니다. 이처럼 this는 선언 위치가 아니라 호출 방식에 따라 결정된다는 점이 JavaScript의 핵심 특징입니다.