JavaScript

[JS] this 정리

_doit 2024. 9. 15. 18:44
728x90
반응형

오늘은 상황에 따라 달라지는 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
728x90
반응형