저번 글에서 this의 4가지 의미중 2가지를 알아보았다.

첫번째 뜻은 window를 의미하고 두번째 뜻은 간략하게 자신을 담고있는 오브젝트를 의미한다고 설명할 수 있겠다. 다음 뜻을 알아보자.

3.constructor 안에서 this의 의미

자바스크립트에서 오브젝트를 비슷한걸 여러개 만들고 싶을 경우 오브젝트를 복사하는게 아니라 constructor(생성자 함수)라는걸 만들어서 사용한다.

쉽게 말하면 constructor는 오브젝트를 복사해서 생성해주는 기계라고 생각하면 된다.

그럼 기계를 어떻게 만드는지 알아보자.

function 기계(){
  this.이름 = 'Kim'
}
let 오브젝트 = new 기계();

이것이 기계 즉 constructor를 만드는 가장 간단한 예시이다.

여기서의 this는 기계로부터 새로 생성될 오브젝트들을 의미한다.

new 키워드를 이용하면 새로운 오브젝트를 꺼낼 수 있다.

그리고 새로운 오브젝트는 {이름 : 'Kim'} 이라는 값을 가지고 있다.
(this 라는 키워드 덕분에)

constructor(생성자 함수)에 대해서는 다음 글에서 자세하게 다뤄볼 예정이니 간략하게 설명하고 넘어가겠다.

4.eventlistener 안에서의 this

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

이벤트리스너라는 문법안에서 this를 사용하게 되면 이것은 바로 e.currentTarget이라는 뜻과 똑같은 의미를 가진다.

e.currentTarget은 지금 이벤트가 동작하는 곳을 뜻하는데 쉽게 설명하자면 지금 addEventListener 부착된 HTML 요소를 뜻한다고 보면 된다.

이게 this의 마지막 뜻이다.

this의 활용법은 매우 무궁무진하다. 그만큼 자바스크립트에서 this는 매우 중요하고 기본적인 개념이기 때문에 이번에 블로그를 쓰며 개념을 정확히 이해하는 것에 집중했다. 블로그를 쓰며 이해하는 시간보다 쓰는 시간이 더 길어진 건 비밀이지만 정확히 짚고 넘어가서 기분이 조타~,~