JavaScript 정리 : this (1) 상황별 this

JavaScript에서 this가 가리키는 객체는 정해져 있지 않으며, 호출될 때 결정된다.
아래처럼 다양한 상황에서 this가 어떤 객체를 가리키게 되는지 알아보자.
(화살표함수에서의 this는 다음 글에서 정리한다.)

---

   목차

1. 전역 컨텍스트 (Global scope) & 함수 호출
2. 객체에 속한 메서드 호출
3. 객체에 속한 메서드의 내부 함수 호출
4. 함수를 메서드로 호출 (call, apply, bind)
5. 생성자 함수 호출
6. 클래스
7. 이벤트 핸들러
8. "use strict" 모드

---

1. 전역 컨텍스트 (Global scope) & 함수 호출

this = 전역 객체

(브라우저에서는 window)

console.log(this); // 전역 객체 (브라우저에서는 window)

function myFunction() {
  console.log(this);
}

myFunction(); // 전역 객체 (브라우저에서는 window)

---

2. 객체에 속한 메서드 호출

this = 메서드가 속한 객체

const obj = {
  method: function() {
    console.log(this);
  }
};

obj.method(); // obj 객체

---

3. 객체에 속한 메서드의 내부함수 호출

this = 전역 객체

(내부 함수에서는 메서드의 this와 다른 객체를 가리킴, 주의 필요)
전역 스코프에서 실행되며 함수를 호출했기 때문에 this는 전역객체가 된다.

const obj = {
  outerMethod: function() {
    const innerMethod = function() {
      console.log(this); // 전역 객체 (브라우저에서는 window)
    };
    innerMethod();
  }
};

obj.outerMethod();

---

4. 함수를 메서드로 호출 (call, apply, bind)

this = 매개변수로 넘긴 객체

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

const person = { name: 'Alice' };

greet.call(person); // Hello, Alice
greet.apply(person); // Hello, Alice

const greetPerson = greet.bind(person);
greetPerson(); // Hello, Alice

---

5. 생성자 함수 호출

this = 생성자로 생성된 새로운 객체

function MyClass() {
  console.log(this);
}

const instance = new MyClass(); // MyClass 인스턴스

---

6. 클래스

this = 클래스의 인스턴스

(해당 메서드를 호출한 객체)

class Dog {
  constructor(name) {
    this.name = name;
  }

  bark() {
    console.log(`${this.name} is barking`);
  }
}

const dog = new Dog('Buddy');
dog.bark(); // Buddy is barking

---

7. 이벤트 핸들러

this = 이벤트를 발생시킨 DOM 요소

(currentTarget과 동일)

const button = document.querySelector('button');

button.addEventListener('click', function() {
  console.log(this); // <button id="button">버튼</button>
  console.log(e.currentTarget); // 위와 동일
});

---

8. use strict 모드

this = 함수 내부에서 "use strict" 모드 사용 시, this가 undefined로 설정됨

(원래 전역 객체인 경우)

"use strict";

function strictModeFunction() {
  console.log(this); // undefined
}

strictModeFunction();

---

출처 : MDN, https://sangjuntech.tistory.com/24, ZeroCho, chatGPT