JAVASCRIPT) this에 대한 모든 것_ 심화 설명과 예제
안녕하세요, 코딩을 사랑하는 여러분! 오늘은 JavaScript의 가장 중요한 개념 중 하나인 this 키워드에 대해 자세히 알아보는 시간을 가져보겠습니다. 이 글을 통해 this의 정의, 사용 방법, 기본값, 그리고 언제 많이 사용되는지 등 다양한 내용을 다뤄보겠습니다. 끝까지 함께 해주세요!
this의 정의
JavaScript에서 this 키워드는 함수가 호출될 때 그 함수가 소유한 객체를 참조합니다. 이는 함수의 실행 컨텍스트(context)에 따라 다르게 결정됩니다. this는 객체 지향 프로그래밍에서 중요한 역할을 하며, 코드의 유연성과 재사용성을 높이는 데 큰 도움을 줍니다.
this의 사용 방법
this 키워드는 함수 내에서 사용할 수 있으며, 그 함수가 어떻게 호출되었는지에 따라 달라집니다. 기본적으로 다음 네 가지 방식으로 결정됩니다:
- 전역 컨텍스트: 전역 실행 컨텍스트에서 this는 전역 객체(global object)를 참조합니다. 브라우저 환경에서는 window 객체를 의미합니다.
- 객체 메소드: 메소드 내에서 this는 그 메소드를 소유한 객체를 참조합니다.
- 생성자 함수: 생성자 함수 내에서 this는 새로 생성된 인스턴스를 참조합니다.
- 명시적 바인딩: call, apply, bind 메소드를 사용하여 this를 명시적으로 설정할 수 있습니다.
기본값
- 전역 컨텍스트에서: 브라우저 환경에서는 this가 기본적으로 window 객체를 참조합니다.
- 엄격 모드에서는 undefined를 참조합니다.
언제 많이 쓰이는가?
this는 주로 다음과 같은 경우에 많이 사용됩니다:
- 객체 지향 프로그래밍: 객체 메소드에서 객체 자신을 참조할 때.
- 이벤트 핸들러: 이벤트가 발생한 요소를 참조할 때.
- 생성자 함수: 새로운 객체 인스턴스를 생성할 때.
- 콜백 함수: 콜백 함수에서 컨텍스트를 유지할 때.
실전 예제: 다양한 컨텍스트에서의 this 사용
이제 this 키워드를 다양한 컨텍스트에서 어떻게 사용되는지 예제를 통해 알아보겠습니다.
전역 컨텍스트에서의 this
1
console.log(this); // window 객체를 참조 (브라우저 환경)
객체 메소드에서의 this
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const person = {
name: 'Alice',
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.greet(); // "Hello, my name is Alice"
생성자 함수에서의 this
javascript
코드 복사
function Person(name) {
this.name = name;
}
const alice = new Person('Alice');
console.log(alice.name); // "Alice"
명시적 바인딩에서의 this
1
2
3
4
5
6
7
8
9
function greet() {
console.log(`Hello, my name is ${this.name}`);
}
const person = {
name: 'Alice'
};
greet.call(person); // "Hello, my name is Alice"
this와 화살표 함수
화살표 함수는 자신만의 this 바인딩을 가지지 않습니다. 대신, 화살표 함수 내의 this는 상위 스코프의 this를 그대로 사용합니다. 이를 통해 콜백 함수나 이벤트 핸들러에서 this를 혼동 없이 사용할 수 있습니다.
화살표 함수에서의 this
1
2
3
4
5
6
7
8
9
10
const person = {
name: 'Alice',
greet: function() {
setTimeout(() => {
console.log(`Hello, my name is ${this.name}`);
}, 1000);
}
};
person.greet(); // "Hello, my name is Alice" (1초 후 출력)
this와 이벤트 핸들러
이벤트 핸들러에서 this는 이벤트가 발생한 요소를 참조합니다. 이를 통해 이벤트가 발생한 요소에 쉽게 접근할 수 있습니다.
이벤트 핸들러에서의 this
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 핸들러 예제</title>
</head>
<body>
<button id="myButton">클릭하세요</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
console.log(this); // 클릭된 버튼 요소를 참조
this.textContent = 'Clicked!';
});
</script>
</body>
</html>
this와 bind 메소드
bind 메소드는 새로운 함수를 반환하며, 해당 함수가 호출될 때 this 값이 지정된 값으로 고정됩니다. 이를 통해 함수의 this 컨텍스트를 명시적으로 설정할 수 있습니다.
bind 메소드 사용 예제
1
2
3
4
5
6
7
8
9
const person = {
name: 'Alice',
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
const greet = person.greet.bind(person);
greet(); // "Hello, my name is Alice"
마무리
오늘은 JavaScript의 this 키워드에 대해 깊이 있게 알아보았습니다. this는 함수가 호출되는 방식에 따라 달라지며, 이를 잘 이해하면 더욱 유연하고 강력한 코드를 작성할 수 있습니다. 다양한 예제를 통해 this의 개념과 사용 방법을 익히셨길 바랍니다.
이 포스팅이 여러분의 JavaScript 이해에 도움이 되었기를 바랍니다. 궁금한 점이 있거나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요. 즐거운 코딩 되세요! 😊
다음 시간에는 더 흥미로운 주제로 찾아뵙겠습니다. 감사합니다!