[JavaScript] 도대체 this 는 뭘까

대충 알고 쓰던 this

연휴내내 시간이 넘쳐 흘러서 본격 문법 공부를 시작했다

 

오늘의 주제! this, 너 도대체 뭐니.

대충 알아도 구현하는 것에 문제는 없지만 기왕이면 제대로 알고 쓰자!

 

시작!

this의 의미는 몰까?

크게 4가지 의미로 쓸 수 있다 

 

1-1 그냥 쓰거나 함수 안에서 쓰면 this는 window!

 console.log(this)

콘솔에 this를 찍으면 window {모모 어쩌구} 값이 나온다

이것이 첫번째 의미이다

this = window

 

여기서 window는 모냐고요?

걍걍 모든 것을 보관하고 관리하는 전역 객체!

 

alert()

console.log() 요런 애들을 보관하는 큰 {오브젝트}

<script>
  var x = 10;
</script>

우리가 변수를 만들 때도 x는 window라는 큰 오브젝트안에 자동적으로 생성됨!

 

 

1-2 strict mode일 때, 함수 안에서 쓰는 this = undefined

<script>
  'use strict';

  function printlog(){
    console.log(this)
  }
  
  printlog();
  
</script>

키워드 use strict는 strict mode로 자바스크립트를 작성하도록 하는 키워드!

 

strict mode는 실수를 방지 (?) 하게 해쥼

strict mode에선 this 키워드를 일반함수 안에서 불렀을 때 undefined라는 값으로 강제 지정!

 

 

2 object 자료형 내에 메소드가 있을 때, this값은 상위 오브젝트

var testobj = {
  name : 'Kim',
  printlog : function(){ 
  		console.log(this) 
                } 
}

오브젝트 안에 메소드를 꺼내 쓸 때는 ' testobj.printlog(); ' 요런 식으로 꺼내쓰게 되는데

메소드 안에서 this를 사용하면 printlog의 상위, 메소드를 가지고 있는 오브젝트를 의미함!

 

 

3 constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트

function 학생(){
  this.이름 = 'Kim';
}

this는 학생으로부터 새로 생성될 오브젝트를 의미

 

4 eventlistener 안에서 쓰면 this = e.currentTarget

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

this = e.currentTarget

e.currentTarget 은 지금 이벤트가 동작하는 곳

 

 

결론!

this를 알고 싶을 때는 가장 가까이 있는 함수를 살펴보자

 

 

-끝-