JavaScript에서 this 키워드

this는 함수의 실행 컨텍스트에 따라 그 값이 결정됩니다. 함수의 호출 방식에 따라 this의 값이 다르게 결정되며, 일반적으로는 함수를 호출한 객체를 가리킵니다.

this의 다양한 사용 예시

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

전역 실행 컨텍스트에서 this는 전역 객체를 참조합니다. 브라우저에서는 window 객체가 전역 객체입니다.

console.log(this); // 브라우저에서는 `window`를 출력

2. 함수에서의 this

함수 내에서 this의 값은 함수 호출 방식에 따라 달라집니다.

일반 함수 호출에서 this는 전역 객체(window)를 가리킵니다. 엄격 모드('use strict')에서는 this가 undefined입니다.

function show() {
  console.log(this);
}
show(); // 일반 모드에서는 `window`, 엄격 모드에서는 `undefined`

메서드로서의 함수 호출에서 this는 메서드를 호출한 객체를 가리킵니다.

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}`);
  }
};
obj.greet(); // "Hello, Alice"

3. 생성자 함수에서의 this

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

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log(`Hi, my name is ${this.name}`);
  };
}

const person1 = new Person('Alice');
person1.greet(); // "Hi, my name is Alice"

4. 화살표 함수에서의 this

화살표 함수에서 this는 함수가 생성된 컨텍스트의 this를 "상속"받습니다. 즉, 화살표 함수 자체에서는 this가 바인딩되지 않습니다.

const obj = {
  name: 'Alice',
  greet: () => {
    console.log(`Hello, ${this.name}`);
  }
};
obj.greet(); // "Hello, " - 화살표 함수에서 this는 obj가 아니라 상위 스코프(여기서는 전역)의 this를 참조

this 사용 시 주의사항

this는 함수가 호출되는 방식에 따라 동적으로 결정됩니다.
화살표 함수에서는 this가 상위 스코프의 this를 가리키므로, 메서드에서 화살표 함수를 사용할 때 주의가 필요합니다.
생성자 함수에서는 new 키워드를 사용하여 호출해야 this가 적절히 바인딩됩니다.
this 키워드는 JavaScript에서 중요한 부분을 차지하며, 함수의 호출 방식에 따라 그 의미가 달라지므로 정확한 이해가 필요합니다.