JavaScript - This

✅ This란?

• 다른 언어와 다르게 동작합니다.(엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다.)
• 스코프와 관계가 있습니다.
• 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind메서드를 사용할 수 있습니다.
• 화살표 함수에는 this가 없습니다.

1️⃣ 기본 바인딩

• 기본적인 바인딩은 전역적으로 바인딩 되는 것을 의미하며, 브라우저 상에서는 window 객체를 가르킵니다.
  

2️⃣ 암시적 바인딩

• 함수 f가 호출되는 위치에서 this가 바인딩 됩니다.
  • 아래 이미지를 보시면 this가 obj 객체에 바인딩 되면서 a를 가져오게 됩니다.
  • foo()를 호출하면 this는 기본 바인딩이 되면서 a를 알수 없게 되므로 window를 호출합니다.
• 이와 같이 암시적 바인딩을 하게 되는 경우에는 함수 호출 위치에 따라서 런타밍 바인딩이 되기 때문에 원하는 값을 얻지 못하는 경우가 생깁니다.

3️⃣ 명시적 바인딩

• call, apply, bind 함수를 사용하여 this를 원하는 대상에게 바인딩 할 수 있습니다.
  • call 은 인자를 , 로 구분해서 넣어줍니다.
  • apply 는 인자를 배열 형태로 넣어줍니다.
  • bind 는 this가 새롭게 바인딩한 함수(원본 함수 복제본)을 반환합니다.
    • bind 를 통해 생성된 함수의 this는 최초 바인딩된 객체에 고정됩니다.