자바스크립트의 this 키워드는 자신이 속한 객체를 참조하는 특수한 식별자입니다. 다만 this가 무엇을 가리키는지는 사용된 문맥(호출 방식)에 따라 달라진다는 점이 핵심입니다.
문맥별 this의 참조 대상
this의 동작은 아래와 같이 상황에 따라 결정됩니다.
- 단독으로 사용하거나 일반 함수 내부에서 사용할 경우 − 전역 객체(window)를 참조합니다.
- 객체의 메서드 내부에서 사용할 경우 − 해당 메서드를 소유한 객체를 참조합니다.
- 이벤트 리스너 내부에서 사용할 경우 − 이벤트를 받은 HTML 요소를 참조합니다.
예제 코드
다음 예제는 여러 문맥에서 this가 실제로 어떤 객체를 가리키는지 확인하는 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript this Identifier</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>
위 버튼을 클릭하면 여러 문맥에서 'this'가 어떤 객체를 참조하는지 확인할 수 있습니다
</h3>
<script>
// 전역 문맥에서의 this 저장
let thisRef = this;
let sampleEle = document.querySelector(".sample");
// 일반 함수 내부의 this
function test() {
return this;
}
// 객체 메서드 내부의 this
let testObj = {
a: 22,
check() {
return this;
},
};
document.querySelector(".Btn").addEventListener(
"click",
() => {
sampleEle.innerHTML = "일반 함수 내부의 this = " + test() + "<br>";
sampleEle.innerHTML += "메서드 내부의 this = " + testObj.check() + "<br>";
sampleEle.innerHTML += "전역 문맥의 this = " + thisRef + "<br>";
},
false
);
</script>
</body>
</html>실행 결과
페이지를 처음 열면 아래와 같이 버튼과 안내 문구가 화면에 표시됩니다.
“CLICK HERE” 버튼을 클릭하면 각 문맥에서 this가 참조한 객체가 출력됩니다.
결과 해석
- 일반 함수 내부의 this: 브라우저 환경에서는 전역 객체인 window를 가리킵니다.
- 메서드 내부의 this: check() 메서드를 호출한 객체인 testObj 자신을 가리킵니다.
- 전역 문맥의 this: 스크립트 최상위 레벨에서도 마찬가지로 window 객체를 참조합니다.
참고로 위 예제의 이벤트 리스너는 화살표 함수(arrow function)로 작성되었습니다. 화살표 함수는 자신만의 this를 갖지 않고 외부 스코프의 this를 그대로 상속받기 때문에, 일반 function으로 작성했을 때와는 this의 동작이 달라질 수 있다는 점도 함께 기억해 두면 좋습니다.