/ JAVASCRIPT

this의 여러가지 의미

JavaScript 관련 글입니다.




이번 글은 this에 대해서 정리해보겠습니다.
자바스크립트에서 this는 상황별로 의미가 조금씩 다릅니다.

1. 그냥 this를 사용하거나 일반 함수 내에서 의미

// 그냥 this를 콘솔에 출력해보기
console.log(this)

// 일반적인 함수 안에서 this를 출력해보기
function test(){
    console.log(this);
}
test();

이 경우에는 둘다 window라는 object가 출력됩니다. window는 자바스크립트의 기본 함수들이 모두 모여있는 전역 객체입니다. 여기서 주의할 점은 strict mode인 상태에서 함수내에 this를 사용할 경우엔 window가 아닌 undefined가 출력됩니다.

2. object안의 메소드에서 this를 사용할 시

const person = {
    name : 'Son',
    info : function() {
        console.log(this);
    }
}

person.info();

위의 예시처럼 person이라는 object안에 info 라는 메소드가 있고, 그안에서 this를 출력하는 코드를 작성해보았습니다. 이 경우의 this는 이 메소드를 가지고 있는 object를 의미합니다.

3. 인스턴스의 의미


클래스로부터 생성되는 오브젝트, 즉 인스턴스를 의미하기도 합니다.

4. 이벤트리스너에서 this

document.getElementById('button').addEventListener('click', function() {
    console.log(this);
})

‘button’이라는 id값을 가진 버튼이 있다고 가정하고, 이 버튼을 가져와서 이벤트를 추가하는 상황입니다.
2번째 인자로 콜백함수가 들어가고 그 안에서 this를 출력해보면 이벤트가 동작하는 대상이 출력됩니다. 즉, 버튼이 출력이 됩니다. 이는 event.currentTarget과 동일합니다.



주의할 점은 function키워드가 아니라 화살표함수를 사용한 경우 this는 다른 값이 나옵니다. 이 경우는 외부 this를 그대로 사용합니다. 화살표함수를 사용할 때와 그냥 function 키워드로 사용할 떄와의 차이를 구분해서 잘 사용해야겠습니다.



End.