Javascript This바인딩

일단 작성하기전에 내생각부터 말해보자면 코드를 해석하기에 this 바인딩은 특히 JavaScript 초보자에게 혼란스러울수 있다고 생각한다. 직접 변수를 접근하는 방식이 더 간단하고 명확하다고 생각한다.

상황에 따라 다르겠지만, 협업하는 과정에서 누군가가 이해하기가 힘들다면 this바인딩에 명확한 장점을 내세울수 없다면 직접접근이 더 좋은 방법이라고 생각합니다.
하지만 개념자체는 알고 있어야하기 때문에 정리해봅니다.

this는 함수가 호출되는 방식에 따라 다르게 바인딩됩니다. 자바스크립트에서는 실행 컨텍스트(Execution Context)에 의해 this가 결정됩니다.

1. 기본 함수 호출:

• 함수가 전역에서 호출되면, this는 전역 객체를 참조합니다.(브라우저에서는 window)

function globalFunc() {
  console.log(this); // window
}
globalFunc();

2. 메서드 호출:

• 객체의 메서드로 호출될 경우, this는 해당 객체를 참조합니다.

const obj = {
  value: 10,
  getValue() {
    return this.value;
  }
};
console.log(obj.getValue()); // 10

3. 생성자 함수 호출:

• 생성자 함수에서는 this가 새로 생성된 객체를 가리킵니다.

function Person(name) {
  this.name = name;
}
const person = new Person('Seulbin');
console.log(person.name); // Seulbin

4.call, apply, bind 메서드:

• 이 메서드들은 this를 명시적으로 설정할 수 있습니다.
  -> call: 인수를 직접 나열하여 호출
  -> apply: 인수를 배열 형태로 전달
  -> bind: 새로운 함수를 반환해, this를 고정

const person = { name: 'Seulbin' };
function introduce() {
  console.log(`My name is ${this.name}`);
}
introduce.call(person); // My name is Seulbin

5. 화살표 함수:

• 화살표 함수는 자신만의 this를 가지지 않으며, 선언된 위치의 this를 상속받습니다. 즉, 화살표 함수는 외부 스코프의 this를 그대로 사용합니다.

const obj = {
  name: 'Seulbin',
  getName: () => {
    console.log(this.name); // undefined (전역 스코프의 this 사용)
  }
};
obj.getName();

정리:

• this는 함수가 어떻게 호출되었는지에 따라 바인딩이 다릅니다. 전역, 객체 메서드, 생성자 함수, 명시적 바인딩(call, apply, bind), 그리고 화살표 함수에서 각각 다르게 동작합니다.