[JS ES6]-[2] this 핵심만 이해하기

안녕하세요.

이번 글에서는 자바스크립트에서의  this 핵심만 알려드리겠습니다.

 

썸네일

1. this 이해하기

this를 이해하기 위해선 먼저 객체지향을 간단히 알아야 합니다.

아래 글에서 2분이면 객체지향을 이해할 수 있어요!

(javascript) 객체지향(oop) 핵심만 이해하기

 

 

윗글을 읽었다면 js에서 대부분이 객체로 이루어져 있다는 것을 아실 겁니다!

왜 this를 이해하는데 객체지향을 이해해야 할까요?

그 이유는 this는 객체를 지칭하는 용어이기 때문입니다.

간단한 예를 들어보죠

var obj = {
    name: 'kim',
    say_name: function() {
        console.log(this.name)
    }
};

obj.say_name();  //kim

 

say_name 함수를 실행시키자 "kim"이 출력됩니다.

왜냐면 this가 obj란 객체를 지칭하기 때문이죠. 그래서 객체 안에 name값을 가져와서 출력합니다.

이렇게 이해하기 쉬운 this 왜 사람들이 어렵게 느낄까요?

이유는 현재 환경에 따라 this가 객체를 지정하기 때문입니다.

this를 지칭하는 크게 3가지 상황이 있는데요.

결국 this가 객체를 지칭한다는 것을 이해하면 쉬운 개념이에요!

 

 

1. 그냥 this를 쓰거나  함수 안에서의 this

 => window 객체 지칭

2. 객체 안의 함수에서의 this
 => 해당 객체 지칭

3. eventlistener 안에서의 this

 => e.currentTarget 객체 지칭

 

 

 

1.1 그냥 this를 쓰거나 함수 안에서의 this

가리키는 객체 => window 객체

 

window 객체란?

js는  대부분이 객체로 이루어져 있다는 건 아시죠?

window 객체는 전역변수, 함수, dom 등을 전역으로 감싸고 있는 큰 객체라고 생각하시면 됩니다. 

console.log, alert 등이 전부 window 객체에 있습니다.

테스트하려면 객체를 사용할 때처럼 window.alert(), window.console.log() 사용하면 됩니다.

 

그냥 this를 출력하면 this가 window 객체를 지칭하네요.

this 출력

간단하게 생각해 보면 왜 이렇게 출력되는지 알 수 있습니다.

우리가 출력하는 this는 어떠한 객체도 지칭해 주지 않고 있습니다.

어떠한 객체도 지칭하지 않는다면,  this는 자동으로 전역 객체를 지칭합니다. 

그러니 전역객체인 window가 출력되는 것이죠!

 

왜 this를 지칭하지 않으면 자동으로 전역 객체를 지칭하나요?

js에서는 변수를 찾을 때 현재 환경에서 그 변수가 없으면 상위 환경을 검색합니다.
그렇게 상위 환경으로 올라가다, 가장 상위 환경에 도착하면 그만둡니다.

그래서 this를 지칭하지 않으면 전역 객체인 Window 객체를 봅니다.

 

 

함수 안에서의 this도 마찬가지로 window객체를 지칭합니다!

함수 안에서의 this 출력

 

 

1.2 객체 안의 함수에서의 this

가리키는 객체 => 해당 객체

 

js에선 객체 안에 함수를 넣을 수 있는데요.

객체 안의 함수에서의 this값은 해당 객체를 가리킵니다.

var obj = {
    name: 'kim',
    say_name: function() {
        console.log(this.name)
    }
};

obj.say_name();  //kim

this.name의 값이 obj객체를 지칭한 걸 알 수 있습니다.

 

객체안의 함수는 전문용어로 메서드(method)라고 말합니다.

여기선 say_name 메서드라고 할 수 있겠네요

 

 

1.3 eventlistener 안에서의 this

가리키는 객체 => e.currentTarget

 

e.currentTarget의 뜻은 현재 이벤트가 동작하는 곳을 뜻합니다.

그냥 addEventListener로 가져온 html 요소라고 생각하시면 됩니다.

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