[JavaScript] 자바스크립트의 this 알아보기

자바스크립트에서 this를 활용하여 작업을 할 수가 있는데,
this가 의미하는 것이 각각의 상황에서 다 다르므로 이해를 잘 하는것이 중요하고,
헷갈릴때는 console.log()를 활용하는 것이 좋습니다.

그러면 this에 대해 알아보겠습니다.

구문

this

브라우저의 콘솔창에 this를 쳐보면

this // window {}

이렇게 this는 window를 의미합니다.

또 함수에서 this가 의미하는것은

function a() { console.log(this) }
a() // window {}

역시나 window 입니다.
이렇듯 this는 기본적으로 window를 의미합니다.


그렇다면 this가 다른 것을 의미할 때의 상황을 알아보겠습니다.
우선 객체 안에서의 this입니다.

let obj = {
  a : function() { console.log(this) }
}
obj.a(); // 해당객체인 obj

객체안에 this를 사용하면 this는 해당 객체를 의미합니다.

단 다음과 같이 사용하면 결과가 달라집니다.

let a2 = obj.a;
a2() // window

호출할때, a2는 obj.a를 꺼내온 것 이기 때문에 obj의 메서드가 아닌 함수여서 this가 window를 의미합니다.

this는 class 또는 생성장 함수, 공장함수에서 사용을 많이 하는데 ES6에서 추가된 class문법에서 사용할때 마찬가지로 자기자신이 됩니다.

class Hero {
    constructor(name, hp) {
        this.name = name
        this.hp = hp
    }
}
const hero = new Hero("DH", 100);
console.log(hero.name, hero.hp) // DH 100

하지만 특정메서드에서는 콜백함수의 this를 바꾸기도 합니다. 대표적으로는 이벤트 리스너를 사용했을때입니다.

document.body.addEventListener("click", function() {
    console.log(this) // body
}) 

위에서 확인했을때 함수안에서의 this는 window를 의미했는데, 이벤트리스너의 콜백함수에서 this는
body를 의미하는 것으로 바뀝니다.


이러한 문제를 해결하는 방법으로는
첫 번째로 this를 새로운 변수에 저장을 따로 하거나

document.body.addEventListener // body
  const that = this;
  function inner() {
    console.log('inner', this, that); // inner window body
  }
  inner();
});

위의 경우에서 this는 body를 의미하는 중이고, inner()함수 안에서의 this는 window를 의미합니다.
그래서 that이라는 변수를 이용하여 그 상위 함수의 this를 가져오게 할 수 있습니다.

두 번째 화살표 함수를 사용하는 것입니다.

document.body.addEventListener('click', function() {
  console.log(this); // body
  const inner = () => {
    console.log('inner', this); // inner body
  }
  inner();
});

참고
ZeroCho Blog - 자바스크립트의 this는 무엇인가?
this - JavaScript | MDN