this란 무엇인가?

this가 쓰이는 곳에서 다르게 인식 되는 경우가 있었다.

그런 애매한 부분이 있기에 이번에 포스팅을 함으로써 정리해보려고 한다!!

https://youtu.be/GteV4zfqPIk

 

this는 무엇인가?

 JS에서 this는 객체를 가리키는 키워드라고한다. 즉 this는 객체이다.

객체는 객체인데... this는 좀 특별하다. 대부분의 경우에 this는 함수를 호출한 방법에 의해 결정된다.

강의에선 this는 호출한 놈이라고 하였다.

호출한 놈이 없을 경우에는 기본적으로 window객체를 의미한다고 한다. 

let person = {
 fullname : 'taehyeki',
 age : 20,
 printThis : funtion() {
  console.log(this);
  console.log(this === person);
 }
};

person.printThis();

>>>{ fullname:'taehyeki', age:20, printThis:f}
>>>true

객체 안에서 위와 같은 함수를 정의하고 그 함수를 호출하면 어떨까, 함수는 this를 console에 찍는역할을 한다.

함수의 실행 결과 여기서의 this는 person이라는 객체를 가리킨다. 동등 연산자로 확인해보았을 때도 true가 나온다.

따라서 this.age 로 접근하면 20을 잘 출력할 수가 있을 것이다.

 

함수를 화살표 함수로 만들면 위와 같은 결과가 나오지 않음

 

즉 여기서 호출한 놈이 person이니까(person.printThis) this는 person을 가리킨다.

 

아래와 같이 코드를 작성한다면 호출한 놈이 없으니까 전역객체를 가리킨다.

const fn = function(){
  console.log(this)
}

fn()
>>> global or window

 

 하지만 100%는 아니고 대부분의 경우 위와 같이 this는 호출한 놈이다.

 

this를 호출한 놈이 아닌 우리가 원하는 녀석으로 설정할 수도 있다. bind를 사용하면 가능하다.

 

function printThis(){
  console.log(this)
}

const obj = {
  name : 'taehyeki',
  age : 20,
}

const printThis1 = printThis.bind(obj)
printThis1()

>>> { name: 'taehyeki', age: 20 }

bind함수를 사용해보자,

this로 만들고 싶은 녀석을 기존함수의 bind함수를 호출하여 인자에 넣어보자

그의 대한 반환 값으로 함수를 반환하는데, 이 함수를 호출해보면  window나 global이 아니라 위와 같이 obj라는 this를 반환하고 있는 것을 확인할 수 있다. 

 

const timeObj  = {
  whoAmI : 'taehyeki',
  age : 22,
  timeFn : function(){
    setTimeout(function(){
      console.log(this.whoAmI)
      console.log(this.age)
    },1000)
  }
}

timeObj.timeFn()

여기서 위와 같이 함수를 작성해준 뒤 html파일을 열어보자.

timeFn함수를 호출하는 놈이 timeObj이니까 this에는 timeObj가 들어있을테고, whoAmI, age의 값이 정상적으로 찍힐 것이라고 생각하였다. 

하지만 결과는 위와 같다.

this에는 timeObj가아니라 window가 담겨있다. window에는 whoAmI와 age가 없으니 undefined라고 찍히는 것이다.

왜 window가 찍히는 것일까? 이건 setTimeout이 this를 그렇게 설정해 놓았기 때문이다. 나는 timeObj로 바꾸고 싶다. 이럴땐 어떻게 해야할까? bind로 설정하면 된다.

const timeObj  = {
  whoAmI : 'taehyeki',
  age : 22,
  timeFn : function(){
  	// console.log(this) <<< timeObj
    setTimeout((function(){
      console.log(this.whoAmI)
      console.log(this.age)
    }).bind(this),1000)
  }
}

timeObj.timeFn()

아까 확인했듯이 timeFn안에서 this는 timeObj이다. 따라서 setTimeout의 첫번째 인자에 함수가 들어가는데 이걸 괄호로 감싼 뒤에 bind 의 인자에 this를 넣으면 timeObj를 this로 바라보는 함수를 return 한다. 따라서 이 함수에서는 this가  window가 아닌 timeObj를 바라보고 있을 것이다.

콘솔에도 잘 찍힌 것을 확인할 수 있다.

 

화살표 함수 Arrow Function

위에서 다음과 같이 언급한 적이 있다.

함수를 화살표 함수로 만들면 위와 같은 결과가 나오지 않음

 

화살표 함수는 ES6의 문법이다. 화살표 함수는 this를