<aside> 💡 1. this가 뭐고 왜 알아야 할까? 2. 언제 바인딩이 될까? 3. 코드를 분석해 보자! 4. 느낀점

</aside>

이 글은 제가 이해한 바탕으로 작성한 글이여서 틀린 내용이 있을수 있습니다.그런 부분은 피드백을 주세요!

This랑 친해져야 했던 계기

function RockBand(members) {
  this.members = members;
  this.perform = function () {
    console.log(this);
    setTimeout(function () {
      console.log(this);
      this.members.forEach(function (member) {
        member.perform();
      });
    }, 1000);
  };
}

let me = new RockBand([
  {
    name: "kim",
    perform: function () {
      console.log("이건 출력되야함");
    },
  },
]);

me.perform();

이 코드를 보고 this가 무엇을 가리키고 있는지 예상하지 못하고 알고 싶지도 않았지만 js를 좀 더 익숙하게 다루기 위해서는 알아야 된다고 생각이 들었다.이 글은 이 코드를 하나하나 분석해 보면서 결국 this가 무엇을 가리키고 있는지를 통해서 this에 대한 궁금증과 두려움을 해소 할수 있는 글이라고 생각하고 진행해보겠다!

this가 뭐고 왜 알아야 할까

this라는게 무엇일까? 생각을 하면 이걸 통해서 무엇을 할 수 있는지 알수가 있다.this는 호출한 놈을 가리키는 것이다!특히 객체를 가리킨다.즉 어디서,어떻게 호출되어있는지에 따라서 가리키는 객체가 달라진다는걸 알수가 있다.

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

foo();

const obj={
	foo(){console.log(this)} // obj
}

obj.foo();

이 코드를 보면 함수가 어떻게 호출 되었는지 한눈에 파악 할 수 있다. foo함수가 무엇에 의해 호출되었는지 알 수 있는가? 알수 있으면 js고수이다.저 코드만 보고 foo함수는 무엇에 의해 호출 되었는지 알 수 가 없다.그래서 없다고 생각해서 this를 찍어보면 window 객체가 나온다.그렇다 앞에 window 객체가 숨어 있는거였다.궁금하면 console.log(window.foo) 라고 찍어보면 알 수 가 있다.저 다음에 있는 foo메소드는 무엇에 의해 호출 되었는지 한눈에 파악이 가능하다.바로 obj이라는 객체로 통해서 호출이 되어서 obj에 담겨져 있는 객체 정보가 나오는걸 볼수 있다.그렇다면 이걸 통해서 뭘 할 수 있을까? 바로 객체 안에 가지고 오고 싶은 속성들이나 메소드들을 자유자재로 불러올 수 있다는 점을 알 수 가 있었다.

this 바인딩

지금까지 this가 뭔지,this를 통해서 무엇을 할 수 있는지 알아보았다.이제 this가 디테일하게 언제 바인딩 되는지 살펴보고 자바스크립트의 독특한 동작 방식인 동적 바인딩과 정적 바인딩에 대해서 살펴보면서 this가 무엇을 가리키는 지 예상 할 수 있는 능력을 갖춰보자.