this와 바인딩

---

this

• 일반적인 프로그래밍 언어에서의 this는 self(자기자신)을 가리키는 참조변수입니다.
• javascript에서 this는 함수호출 방식에 따라 this가 결정됩니다.

javascript에서 함수가 호출될 때, 기존 매개변수로 전달되는 인자 값에 대해서 arguments 객체와 this 인자가 함수 내부로 암묵적으로 전달됩니다.

✅ 함수 호출 방식과 this
자바스크립트는 함수 호출시 어떻게 호출 되는가에 따라서 동적으로 this가 결정됩니다.
Arrow 함수는 일반적인 this 바인딩과 다르게 Lexical this를 가집니다.

1️⃣ 함수 호출시 this : window
2️⃣ 메소드 호출시 this : 메소드 객체
3️⃣ 내부함수 호출시 this : window
4️⃣ 엄격모드에서의 this : undefined
5️⃣ 이벤트 리스너 호출시 this : 이벤트 객체
6️⃣ 생성자 함수 호출시 this : 생성된 새 객체
---
7️⃣ Arrow 함수 호출시 this : 함수 선언시의 상위 스코프의 this

call, apply, bind를 이용한 this 바인딩

Javascript의 복잡하고 이상한 this를 이해하고, 프로그래머의 의도대로 this를 사용하기 위해서 여러가지 메서드를 사용합니다.

• call

  fun.call(thisArg[, arg1[, arg2[, …]]])

  thisArg : 지정할 this
  arg1 … : 객체를 위한 인수

• apply

  function.apply(thisArg, [argsArray])
  📌 call과 apply의 기능은 같지만 apply가 두 번째 인자를 배열로 넘긴다는 차이가 있습니다.

  thisArg : 지정할 this
  argsArray : 유사배열 객체(arguments)

• bind

  📌 bind를 사용하면 this 값을 영구히 바꿀 수 있습니다.
  📌 함수의 동작을 영구적으로 바꾸므로 버그의 원인이 될 수 있으니 주의해야 합니다.
  📌 bind를 활용해서 this뿐 아니라 다른 인자도 고정시킬 수 있습니다.(currying 패턴)

---

🗒 출처

---

• https://iamsjy17.github.io/javascript/2019/06/07/js33_15_this.html - this와 바인딩 | github