this 키워드

this키워드를 함수와 Object에서 사용해보자.

먼저, this의 뜻을 알아보자.

1. this는 {window}를 뜻한다. (그냥 쓰거나 일반 함수에서 this를 사용했을 때) window는 기본 함수들의 수납공간이다.

만약 자바스크립트 상단에, 'use strict'이런게 있다면 자바스크립트를 엄격하게 실행하게 된다. 그러면 변수 선언시 var을 꼭 써야한다던가 이렇게 바뀐다. 

여기서, 일반함수 내에 this를 사용하면 undefined가 나온다. (strict mode + 일반함수)

2. this를 오브젝트 안에서의 함수에서 사용할 때 즉,

var 오브젝트 = {
	함수 : function() {
    	console.log(this)
    }
}

이렇게 사용하면, this 는 나를 포함하고 있는 오브젝트를 뜻한다.

그러면 예시로

var 오브젝트2 = {
  data : {
    간지함수 : function(){ console.log(this) }
    //신문법으로 간지함수() {console.log(this)} 이렇게 써도 됨
  }
}

 

이렇게 오브젝트2.data.간지함수() 라고 사용하면 this는 오브젝트2.data가 나오게 된다.

근데 만약, 오브젝트 안에 () => {}인 Arrow function을 쓰면 this 값이 함수밖에 있던 window가 나오게 된다.

 

애초에 그냥 함수나 변수를 전역공간에서 만들면 {window} (window라는 오브젝트)에 보관하기에 this 값이 당연하게 window가 나오게 된다.

그러므로 this는 나를 담고 있는 오브젝트를 뜻함 이라고 외우면 된다.

 

한 가지 더, 예시를 들어보면

var 자료 = { 
            data : [1,2,3,4,5] 
}
자료.전부더하기 = function () {
	var 합 = 0;
	this.data.forEach(function(a) {
		합 = 합 + a;
	})
	console.log(합);
};

이렇게, 배열의 합을 더하는 함수를 만들때, 오브젝트 밖에서 자료.함수이름을 써서 함수를 만들면 이 안에서의 this는 오브젝트 자체를 뜻하게 된다.

 

 

3. 먼저, 기계라는 함수를 만들어보자. 기계는 오브젝트 생성기계 즉, Constructor라고 하며, constructor은

function 기계(){
  this.이름 = 'Kim'
  //this는 새로 생성되는 오브젝트 (instance)를 뜻함
}
//그리고 기계(constructor)에서 오브젝트를 생산하는 법은
var 오브젝트 = new 기계();
//오브젝트는 기계 {이름 : "Kim"}가 된다.

위처럼 만들고, 사용한다. 여기서 this는 새로 생성되는 오브젝트를 뜻한다.

 

4. 이벤트리스너안에서 쓰일 땐 e.currentTarget라는 의미로 사용된다.

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

위처럼 쓰면, this가 e.currentTarget이 되는데, 현재 이벤트가 동작되고 있는 곳을 뜻한다.

예시로

document.getElementById('버튼').addEventListener('click', function(){
	setTimeout(()=>{console.log(this.innerHTML)},1000)
});

이렇게 적으면 arrowfunction에 의해 this가 현재이벤트 동작을 가리키게 된다.

 

 

기본적으로 4가지 경우가 있고, 이제 특수한 경우를 알아보자. 

먼저, 버튼을 누르면 반복문을 돌릴 때

document.getElementById('버튼').addEventListener('click', function(e){
  var 어레이 = [1,2,3];
  어레이.forEach(function(){
    console.log(this)
  });
});

위처럼 forEach안에 콜백함수를 넣어서 거기에 this를 출력하면, window가 나온다. 

여기서 this는 콜백함수 그냥 일반함수에서 쓰였기에 this가 window의 뜻으로 쓰인다.

 

두번째로,

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

이렇게 오브젝트 내애서 반복문에서의 this도 window를 출력한다. 오브젝트 안에 있어도 일반함수 안에 있기에 window가 출력된다.

 

마지막으로,

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

Arrow function을 이용하면, 내부의 this값을 변화시키지 않으므로 외부의 this 값을 그대로 사용가능하다.