자바스크립트의 this 이해하기

어떻게 함수가 호출되느냐에 따라서 this의 의미가 달라진다. 단순히 호출하는 것 말고도 JS의 함수는 일급 객체로, 변수에 함수를 저장하거나, 함수의 인자로 전달하거나, 함수의 반환값으로도 사용 가능하다. 이처럼 동적으로 this가 호출되는 방식에 따라서 가리키는 의미가 달라지는 것을 바인딩 된다고 표현합니다. 

 

실행 컨텍스트 안에 디스 바인딩 컴포넌트에 정보가 담기게 된다.

---

This Biding Rules

• 기본 바인딩
• 암시적 바인딩
• new 바인딩
• 명시적 바인딩

---

기본 바인딩

console.log(this) // <- window 객체를 가리킴

함수 문맥에서의 this

function main() {
  console.log(this);
}

this를 호출한 객체를 가리킵니다.

main() <- window 객체 가리킵니다.

main() === window.main() 
// 'use strict'를 하면 main() !== window.main()

---

암시적 바인딩 (다이나믹 바인딩, 런타임 바인딩)

const obj = {
  name: 'ky',
  main: function () {
    console.log(this)
  }
}

obj.main(); <- { name: 'ky', main: f }

this가 obj를 가리킵니다.

this는 함수를 호출하는 객체를 가리킵니다.

 

but 직접 호출하지 않는다면 암시적 바인딩은 없어지게 됩니다.

const main2 = obj.main;
main2() // <- window 를 가리킴. 더이상 obj를 가리키지 않음.

---

명시적 바인딩

this 값을 원하는 값으로 고정하고 싶다면, bind, call, apply를 사용합니다.

call(context, arg1, arg2, ...)

apply(context, args)

function main() {
  console.log(this);
}

const mainBind = main.bind({ name: "hi" }) // 하드 바인딩이라고도 부름
mainBind() <- { name: "hi" }를 가리킴

bind 매소드는 한 번만 쓸 수 있습니다. 한 번 더 쓰더라도 무시해 버립니다.

---

const button = document.getElementById("btn");

// 이벤트 처리기
button.addEventListener("click", function (event) {
  console.log(this); <- <button id="btn">버튼</button> 을 가리킴
  console.log(event.target === this); <- true 반환

});

---

new 바인딩

new 연산자와 함께 함수를 호출하면 생성자함수로서 역할을 수행한다. 

new 연산자를 사용하면 새로운 객체 생성, 함수 코드 실행, 새로 생성한 객체 반환 <- 해당 객체에 this 바인딩

---

바인딩 우선순위

new 바인딩 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩

---

화살표 함수

화살표 함수는 자체만으로 bind 매소드를 쓰는 것과 동일합니다.

this가 호출에 따라서 바뀌지 않습니다.

this를 외부에서 가져옵니다.

---

참고

https://youtu.be/7RiMu2DQrb4

https://www.youtube.com/watch?v=j6VkGimAs-E