this는 무엇일까?

1. 콘솔창에서 출력하거나 함수 안에서 쓴다면 this는 window를 뜻한다.

//window값 출력console.log(this)
//window값 출력
function 함수(){
  console.log(this)
}
함수();
 

2. 메소드를 가지고있는 오브젝트를 뜻한다.

var 오브젝트1 = {
  data : 'Kim',
  함수 : function(){ console.log(this) } 
}
 
오브젝트1.함수();

여기 콘솔창에는 { data : 'Kim', 함수 : f } 이처럼 오브젝트가 출력된다.

 

3. constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트를 뜻합니다.

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

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

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

 

4. eventlistener 안에서 쓰면 this는 e.currentTarget이라는 의미입니다.

//이벤트리스너 안에서 콜백함수를 쓴 경우document.getElementById('버튼').addEventListener('click', function(e){
  var 배열 = [1,2,3];
  배열.forEach(function(){
    console.log(this)
  });
});//window 3번 출력

//오브젝트 안에서 콜백함수를 쓴 경우var 오브젝트 = {
  이름들 : ['김', '이', '박'];
  함수 : function(){
      오브젝트.이름들.forEach(function(){
        console.log(this)
      });
  }
}
//window 3번 출력

var 오브젝트 = {
  이름들 : ['김', '이', '박'];
  함수 : function(){
     오브젝트.이름들.forEach(() => {
        console.log(this)
      });
  }
}

//{이름들: Array(3), 함수: ƒ} 3번 출력