오늘은 상황에 따라 달라지는 this에 대해서 정리해 보도록 할게요.
☑️ 전역 컨텍스트에서의 this
전역 공간에서 this를 호출하면, this가 가리키는 전역 객체 는 코드가 실행되는 런타임 환경에 따라 달라져요.
브라우저 환경에서는 window를, Node.js 환경에서는 global 객체를 가리킵니다.
console.log(this); // 브라우저 환경에서는 window, Node.js 환경에서는 global 객체가 출력됩니다.
var name = 'Alice';
console.log(this.name); // 'Alice' 출력
☑️ 메소드 내부에서의 this
메소드 내부에서 this는 해당 메소드를 호출한 객체를 가리켜요. 즉, 그 객체 자체가 this가 됩니다.
호출한 객체 ===this
var person = {
name: 'Bob',
sayName: function() {
console.log(this.name);
}
};
person.sayName(); // 'Bob' 출력
☑️함수 내부에서의 this
일반 함수에서의 this는 호출 주체를 명시할 수 없기 떄문에, 전역 객체를 가리켜요.
function showThis() {
console.log(this);
}
showThis(); // 브라우저에서는 'window' 객체 출력
☑️생성자 함수 내부에서의 this
생성자 함수는 객체를 만들기 위한 함수인데요. 생성자 함수 내부에서 this를 호출하면, 새로 생성된 객체를 가리켜요.
function Person(name) {
this.name = name;
}
var alice = new Person('Alice');
console.log(alice.name); // 'Alice' 출력
☑️ 화살표 함수 내부에서의 this
화살표 함수 (=this를 바인딩하지 않는 함수)는 일반 함수와 다르게 자신만의 this를 만들지 않고, 정의된 위치의 상위 스코프에서 this를 가져와요. 즉, 화살표 함수 내부에서는 상위 스코프의 this를 그대로 사용합니다.
var name = 'Ciryl Gane';
var person = {
name: 'John Jones',
getName: () => {
console.log(this.fullname);
}
};
person.getName(); // 'Ciryl Gane' 출력여기서 주의해야할 포인트! 객체는 스코프를 제공하지 않아요. 즉, 객체 내부에서 정의된 화살표 함수는 그 객체의 this를 사용하지 않습니다. 객체는 데이터를 저장하는 구조이지만, 함수나 블록처럼 스코프를 형성하지는 않는다는거죠.
☑️ 콜백 함수 내부에서의 this
콜백 함수도 함수기 때문에 this는 전역 객체를 참조하지만(호출 주체가 없잖아요), 콜백함수를 넘겨받은 함수에서 콜백 함수에 별도로 this를 지정한 경우는 예외적으로 그 대상을 참조하게 되어있어요.
// 별도 지정 없음 : 전역객체
setTimeout(function () { console.log(this) }, 300);
// 별도 지정 없음 : 전역객체
[1, 2, 3, 4, 5].forEach(function(x) {
console.log(this, x);
});
예외) 이벤트 핸들러 내부에서의 this
// addListener 안에서의 this는 항상 호출한 주체의 element를 return하도록 설계되었음
// 따라서 this는 button을 의미함
document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector('#a').addEventListener('click', function(e) {
console.log(this, e);
});
예외) 화살표 함수에서 이벤트 핸들러의 this
이벤트 핸들러를 화살표 함수로 정의하면, 상위 스코프의 this를 가져오기 때문에 이벤트가 발생한 요소를 가리키지 않아요
var button = document.getElementById('myButton');
button.addEventListener('click', () => {
console.log(this); // 상위 스코프의 'this' 출력 (전역 객체)
});
요약
| 상황 | this가 가리키는 대상 |
| 전역 공간에서 | 전역 객체 (window 또는 global) |
| 메소드 내부에서 | 해당 메소드를 호출한 객체 |
| 함수 내부에서 | 전역 객체 (window 또는 global) |
| 생성자 함수 내부에서 | 새로 생성된 객체 |
| 화살표 함수 내부에서 | 상위 스코프의 this |
'JavaScript' 카테고리의 다른 글
| [JS] 클로저 (1) | 2024.09.22 |
|---|---|
| [JS] 반복문 (2) | 2024.09.08 |
| [JS] Map 사용 방법 (1) | 2024.09.08 |
| [JS] 1-3) 객체와 객체 메소드, 그리고 객체를 순회하는 방법 (1) | 2024.09.04 |
| [JS] 1-1) JS 언어의 특징과 역사 (1) | 2024.09.02 |
