`this`바인딩의 개념과 특성

this 바인딩의 특성

JavaScript에서 this는 실행 컨텍스트에 따라 다르게 바인딩되는 키워드입니다. 이는 함수가 호출되는 방식에 따라 그 값이 결정됩니다. this 바인딩의 특성을 이해하는 것은 JavaScript에서 매우 중요한데, 이는 다양한 방식으로 함수가 호출될 때 this가 어떻게 해석되는지를 파악하는 데 도움을 줍니다.

1. 글로벌 컨텍스트

브라우저에서, 최상위 레벨(함수 밖)에서의 this는 글로벌 객체를 가리킵니다. Node.js에서는 이것이 global 객체를, 브라우저에서는 window 객체를 가리킵니다.

console.log(this === window); // 브라우저에서 true

2. 함수 호출

기본적인 함수 호출에서 this는 글로벌 객체를 가리키거나, 엄격 모드(strict mode)에서는 undefined를 가리킵니다.

function show() {
  console.log(this);
}
show(); // 글로벌 객체 또는 undefined(엄격 모드)

3. 메서드 호출

객체의 메서드로서 함수가 호출될 때, this는 메서드를 호출한 객체에 바인딩됩니다.

const obj = {
  method() {
    console.log(this);
  }
};
obj.method(); // obj를 가리킴

4. 생성자 함수

new 키워드를 사용하여 함수를 생성자로 호출할 때, this는 새로 생성된 객체를 가리킵니다.

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

5. 화살표 함수

화살표 함수는 자체적인 this 바인딩을 가지지 않습니다. 대신, 화살표 함수는 자신을 둘러싸고 있는 (외부의) 함수의 this 값을 상속받습니다.

const obj = {
  method() {
    const arrowFunc = () => {
      console.log(this);
    };
    arrowFunc();
  }
};
obj.method(); // obj를 가리킴

this 바인딩의 개념도

this의 바인딩은 실행 컨텍스트에 따라 동적으로 결정되며, 다음과 같은 규칙을 따릅니다:

1. 글로벌 스코프: this는 글로벌 객체를 참조합니다.
2. 함수 호출: 일반 함수에서 this는 글로벌 객체(비엄격 모드) 또는 undefined(엄격 모드)입니다.
3. 메서드 호출: this는 메서드를 호출한 객체를 참조합니다.
4. 생성자 호출: this는 새로 생성된 객체를 참조합니다.
5. 화살표 함수: this는 외부 함수의 this를 상속받습니다.