728x90
반응형
this는 현재 실행 중인 함수 내에서 사용되는 특별한 키워드이다.
this의 값은 함수가 호출될 때마다 동적으로 결정되며, 호출 방식에 따라 달라진다.
여러 상황에서 this가 가리키는 대상이 다르기 때문에 상황별 this 동작을 알아야 한다.
1. 전역 컨텍스트 (Global Constext)
전역 컨텍스트에서 this는 전역 객체를 가리킨다. 브라우저 환경에서는 window 객체가 전역 객체이다.
console.log(this); // {}
2. 함수 내부 (Function Context)
일반적인 함수 내부에서 this는 호출 시점에 따라 결정된다.
function exampleFunction() {
console.log(this);
}
exampleFunction(); // <ref *1> Object [global] {- 함수가 단독으로 호출되면 'this'는 전역 객체를 가리킨다.
3. 메서드 내부 (Method Context)
객체의 메서드 내에서 this는 해당 메서드가 속해있는 객체를 가리킨다.
const obj = {
name: 'Example',
logName: function() {
console.log(this.name);
}
};
obj.logName(); // 'Example'
4. 생성자 함수 (Constructor Context)
생성자 함수 내부에서 this는 새로 생성되는 인스턴스를 가리킨다.
function Person(name) {
this.name = name;
}
const person1 = new Person('John');
console.log(person1.name); // 'John'
5. 이벤트 핸들러 내부 (Event Handler Context)
이벤트 핸들러 함수 내에서 this는 이벤트를 발생시킨 DOM 요소를 가리킨다.
document.getElementById('myButton').addEventListener('click', function() {
console.log(this); // 클릭된 버튼 요소
});
예) this.textContent를 사용하여 클릭된 버튼의 텍스트를 변경한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handler Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
// 클릭된 버튼의 텍스트를 변경
this.textContent = 'Button Clicked!';
});
</script>
</body>
</html>
그 외
/ 명시적 설정
bind(), call(), apply()를 사용하여 명시적으로 this를 설정할 수 있다.
/ 화살표 함수
화살표 함수(()=>{})는 자체적인 this를 갖지 않고, 상위 스코프의 this를 유지한다.
728x90
반응형
'STUDY > JavaScript' 카테고리의 다른 글
| JavaScript에서 배열 변형과 데이터 가공을 위한 map메서드 (0) | 2023.11.17 |
|---|---|
| JavaScript에서 많이 사용하는 함수들 (0) | 2023.11.17 |
| JavaScript에서의 함수 유형 (0) | 2023.11.17 |
| 변수선언 키워드 var, let, const의 특징과 주의점 (0) | 2023.11.16 |
| this값을 명시적으로 설정하는 메서드 - bind(), call(), apply() (0) | 2023.11.15 |