[JavaScript] this

1. 일반 함수에서의 this

일반 함수에서 this는 함수를 호출한 객체를 가리킵니다. 하지만 **엄격 모드(strict mode)**에서는 this가 undefined로 설정될 수도 있습니다.

예시 1: 일반 함수에서의 this

function greet() {
  console.log(this);  // `this`는 전역 객체를 가리킴 (브라우저에서는 `window` 객체)
}

greet();  // 일반적으로 `window` 객체를 출력함

이 경우, this는 전역 객체인 window를 가리킵니다. 함수가 객체에 소속되지 않고 일반적으로 호출되었기 때문이에요.

2. 객체의 메서드에서의 this

객체의 메서드 내에서 this는 해당 메서드를 호출한 객체를 가리킵니다.

예시 2: 객체 메서드에서의 this

const person = {
  name: "John",
  greet() {
    console.log(this.name);  // `this`는 `person` 객체를 가리킴
  }
};

person.greet();  // "John"

이 예시에서 this는 person 객체를 가리키며, person.greet() 호출 시 name 속성을 출력합니다.

3. this와 화살표 함수

화살표 함수는 this를 함수가 정의될 때의 this를 그대로 가져옵니다. 즉, 화살표 함수 내의 this는 주변 환경에서 결정됩니다. 이는 일반 함수와 큰 차이점이에요.

예시 3: 화살표 함수에서의 this

const person = {
  name: "John",
  greet() {
    setTimeout(() => {
      console.log(this.name);  // 화살표 함수 내에서 `this`는 `person` 객체를 가리킴
    }, 1000);
  }
};

person.greet();  // 1초 후 "John"

위 예시에서 setTimeout 안의 화살표 함수는 this가 person 객체를 가리키도록 만들어줍니다. 왜냐하면 화살표 함수는 자신만의 this를 가지지 않고 주변의 this를 그대로 사용하기 때문이에요.

4. call, apply, bind로 this 바꾸기

this는 call, apply, bind 메서드를 사용하여 원하는 객체로 바꿀 수 있습니다. 이 메서드들은 this를 수동으로 설정할 수 있게 도와줍니다.

예시 4: call과 apply로 this 바꾸기

function greet() {
  console.log(`Hello, ${this.name}`);
}

const person = { name: "John" };
const person2 = { name: "Jane" };

greet.call(person);  // "Hello, John"
greet.call(person2); // "Hello, Jane"

call()과 apply()는 함수의 첫 번째 인자로 this가 가리킬 객체를 전달합니다. call()은 인자를 개별적으로 받는 반면, apply()는 배열 형태로 인자를 받습니다.

예시 5: bind로 this 영구적으로 바꾸기

const person = { name: "John" };

function greet() {
  console.log(`Hello, ${this.name}`);
}

const greetJohn = greet.bind(person);
greetJohn();  // "Hello, John"

bind()는 this를 고정시켜서, 함수가 호출될 때마다 항상 지정된 객체를 가리키게 합니다.

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

이벤트 핸들러 내에서 this는 이벤트가 발생한 DOM 요소를 가리킵니다.

예시 6: 이벤트 핸들러에서의 this

<button id="myButton">Click me</button>
<script>
  const button = document.getElementById("myButton");
  
  button.addEventListener("click", function() {
    console.log(this);  // `this`는 클릭된 `button` 요소를 가리킴
  });
</script>

this는 addEventListener 안의 이벤트가 발생한 버튼을 가리킵니다.

6. 엄격 모드 (Strict Mode)에서의 this

엄격 모드에서는 this가 전역 객체를 가리키지 않고 undefined가 됩니다.

예시 7: 엄격 모드에서의 this

"use strict";

function greet() {
  console.log(this);  // `this`는 `undefined`
}

greet();  // `this`가 `undefined`로 출력됨

엄격 모드에서는 함수에서 this가 자동으로 전역 객체를 가리키지 않도록 방지합니다.

결론

• 일반 함수에서 this: 함수가 호출된 컨텍스트에 따라 달라짐 (전역 객체 또는 undefined).
• 객체 메서드에서 this: 메서드를 호출한 객체를 가리킴.
• 화살표 함수에서 this: this는 **주변의 this**를 그대로 사용.
• call, apply, bind: this를 명시적으로 설정할 수 있음.
• 이벤트 핸들러에서 this: 이벤트가 발생한 DOM 요소를 가리킴.