[JavaScirpt] This 바인딩

- this 바인딩의 뜻

this는 "현재 실행되는 컨텍스트(문맥)"에서 자기 자신을 가리키는 값
즉, 함수가 어떻게 호출되느냐에 따라 this가 무엇을 참조하는지가 달라짐.

this는 코드 어디에서든 참조 가능하다. (전역, 함수 내부 다 가능)

• 일반 함수 호출 → 전역 객체(window/global), strict 모드에선 undefined

• 메서드 호출 → 메서드를 소유한 객체

• new 생성자 호출 → 새로 만들어진 인스턴스

• 명시적 바인딩 (call, apply, bind) → 지정한 객체

- 화살표 함수 vs 일반 함수의 this 차이

1. 일반 함수

• 호출되는 방식에 따라 this가 동적으로 바뀜.

• 즉, this는 함수가 어디서 정의됐는지가 아니라, 어떻게 실행됐는지에 달려있음.

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

normal(); // window (strict 모드면 undefined)

const obj = { fn: normal };
obj.fn(); // obj

2. 화살표 함수

• 자기만의 this를 갖지 않음.

• 대신 선언될 당시의 상위 스코프(this)를 그대로 상속받음 (렉시컬 바인딩).

const obj = {
  name: "Mini",
  normal: function () {
    console.log(this.name);
  },
  arrow: () => {
    console.log(this.name);
  }
};

obj.normal(); // "Mini"
obj.arrow();  // undefined (obj 아님, 상위 스코프 전역 this)

- 정리

• this = 지금 누굴 가르키고 있는 지

• 일반 함수 → 호출 방식에 따라 this 달라짐. 누가 불렀냐

• 화살표 함수 → 정의된 위치의 상위 스코프 this를 고정해서 씀. 처음 만든 곳의 this를 물려받음 어디서 만들어졌냐

- this 바인딩 규칙

1. 일반 함수 호출
   → 기본적으로 window(브라우저) / global(Node.js).

   function foo() {
     console.log(this); // window (strict 모드면 undefined)
   }
   foo();

2. 메서드 호출
   → 점 앞에 있는 객체가 this.

   const obj = {
     name: "mini",
     sayHi() {
       console.log(this.name);
     }
   };
   obj.sayHi(); // "mini"
   

3. 생성자 함수 (new 호출)
   → 새로 만들어진 인스턴스가 this.

   function Person(name) {
     this.name = name;
   }
   const p = new Person("mini");
   console.log(p.name); // mini
   

4. 명시적 바인딩 (call, apply, bind)
   → 강제로 this 지정.

   function greet() { console.log(this.name); }
   const user = { name: "mini" };
   greet.call(user); // mini
   

5. 화살표 함수
   → 자기 스코프의 this를 상속함. (자기만의 this 없음)

   const obj = {
     name: "mini",
     hi: () => console.log(this.name)
   };
   obj.hi(); // undefined (this는 obj가 아님, 상위 스코프인 전역)
   

- 면접 포인트 (예시 질문 & 답변)

Q. 화살표 함수와 일반 함수의 this 차이는?

• 일반 함수는 호출 방식에 따라 동적으로 this가 바뀜.

• 화살표 함수는 정의될 때의 상위 스코프 this를 유지(렉시컬 바인딩).

• 자바스크립트에서 this는 호출 방식에 따라 달라지는데, 일반 함수는 실행 컨텍스트에 따라 동적으로 바인딩되고, 화살표 함수는 자기만의 this가 없어서 선언 당시의 상위 스코프 this를 렉시컬하게 바인딩

- 실무

• 이벤트 핸들러에서 this 문제 피하려면? → 화살표 함수 or .bind(this)

• 콜백 함수에서 의도치 않게 this가 바뀌는 걸 주의해야 함.

• React 클래스 컴포넌트 시절에는 this 바인딩 필수 → 함수형 컴포넌트 + 훅스로 많이 대체됨.