DAY 06 — this & 바인딩 (call / apply / bind)

🎯 목표

• this가 언제, 어떻게 결정되는지 이해한다
• 일반 함수 / 메서드 / 화살표 함수의 this 차이를 설명할 수 있다
• call / apply / bind의 역할과 차이를 명확히 구분한다

---

this란?

this는 함수가 “어디서 선언됐는지”가 아니라
“어떻게 호출됐는지”에 따라 결정된다

⚠️ 주의

• 스코프 → 선언 위치 기준
• this → 호출 방식 기준

---

this 결정 규칙 (핵심 4가지)

1️⃣ 전역에서의 this

console.log(this);

브라우저: window

2️⃣ 일반 함수 호출

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

foo();

브라우저: window

strict mode: undefined

👉 그냥 호출하면 전역 this

3️⃣ 메서드 호출

const user = {
  name: "철수",
  sayName() {
    console.log(this.name);
  }
};

user.sayName(); // 철수

👉 . 앞의 객체가 this

4️⃣ 화살표 함수

const user = {
  name: "철수",
  sayName: () => {
    console.log(this.name);
  }
};

user.sayName(); // undefined

화살표 함수는 자기 this가 없음

자신이 선언된 스코프의 this를 그대로 사용

화살표 함수 this 한 줄 정리

화살표 함수의 this는
“자기가 태어난 곳의 this”다

this가 깨지는 대표적인 상황

const user = {
  name: "철수",
  sayName() {
    setTimeout(function () {
      console.log(this.name);
    }, 0);
  }
};

user.sayName(); // undefined

이유

setTimeout 안의 함수는 일반 함수

호출 주체 없음 → 전역 this

해결 방법 3가지
1️⃣ 화살표 함수 (가장 많이 씀)

setTimeout(() => {
  console.log(this.name);
}, 0);

2️⃣ bind 사용

setTimeout(function () {
  console.log(this.name);
}.bind(this), 0);

3️⃣ 변수에 저장 (구식)

const self = this;

call / apply / bind란?

함수의 this를 강제로 지정하는 방법

call
func.call(thisArg, arg1, arg2);

즉시 실행

인자 나열

greet.call({ name: "철수" }, "안녕");
// 안녕 철수

apply

func.apply(thisArg, [arg1, arg2]);

즉시 실행

인자를 배열로 전달

greet.apply({ name: "영희" }, ["안녕"]);
// 안녕 영희

bind (⭐ 가장 중요)

const boundFn = func.bind(thisArg);

실행하지 않음

this가 고정된 새 함수 반환

이후 call / apply로도 this 변경 불가

const fn = foo.bind(obj);
fn.call(other); // this는 여전히 obj

바인딩(binding)이란?

this를 특정 객체에 연결(고정)하는 것

bind는 함수 자체를 고정하는 게 아님

함수 안에서 사용되는 this만 고정