this에 대해 설명해주세요.

this는 현재 실행 컨텍스트에서의 객체 참조를 나타냅니다. 즉, 함수가 호출될 때 결정되는 객체를 가리키며, 함수가 어떻게 호출되었는지에 따라 'this'의 값이 달라집니다.

1. 전역 컨텍스트에서의 this

전역 영역에서의 'this'는 브라우저 환경에서는 window 객체를, Node.js 환경에서는 global 객체를 참조합니다.

console.log(this); // window 객체를 출력

2. 함수 호출에서의 this

일반 함수에서 'this'는 기본적으로 전역 객체를 가리킵니다. 하지만 **엄격 모드(strict mode)**에서는 undefined가 됩니다.

function showThis() {
  console.log(this);
}
showThis(); // window 객체를 출력 (엄격 모드에서는 undefined)

3. 메서드 호출에서의 this

객체의 메서드로 함수를 호출할 경우, 'this'는 해당 객체를 참조합니다.

const obj = {
  name: 'Alice',
  getName: function() {
    console.log(this.name);
  }
};
obj.getName(); // 'Alice'를 출력

4. 생성자 함수에서의 this

생성자 함수에서 'this'는 새로 생성되는 인스턴스를 가리킵니다.

function Person(name) {
  this.name = name;
}
const person = new Person('Bob');
console.log(person.name); // 'Bob'을 출력

5. call, apply, bind를 통한 this 제어

함수의 메서드인 call, apply, bind를 사용하면 'this'를 명시적으로 지정할 수 있습니다.

function greet() {
  console.log(this.name);
}
const user = { name: 'Carol' };
greet.call(user); // 'Carol'을 출력

6. 화살표 함수에서의 this

화살표 함수는 자신만의 'this'를 가지지 않고, **상위 스코프의 'this'**를 그대로 사용합니다.

const obj = {
  name: 'Dave',
  getName: function() {
    const innerFunc = () => {
      console.log(this.name);
    };
    innerFunc();
  }
};
obj.getName(); // 'Dave'를 출력

7. 이벤트 핸들러에서의 this

DOM 이벤트 핸들러에서 'this'는 이벤트가 바인딩된 요소를 가리킵니다.

<button id="myButton">Click me</button>

document.getElementById('myButton').addEventListener('click', function() {
  console.log(this.id); // 'myButton'을 출력
});

정리

• 함수 호출 방식에 따라 'this'의 값이 결정됩니다.
• 전역 컨텍스트: 브라우저에서는 window, Node.js에서는 global.
• 일반 함수 호출: 기본적으로 전역 객체를 참조하나, 엄격 모드에서는 undefined.
• 메서드 호출: 해당 객체를 참조.
• 생성자 함수 호출: 새로 생성된 인스턴스를 참조.
• call, apply, bind: this를 명시적으로 설정 가능.
• 화살표 함수: 상위 스코프의 'this'를 사용.
• 이벤트 핸들러: 이벤트가 바인딩된 요소를 참조.