자바스크립트 this

자바스크립트에서 this는 다른 프로그래밍 언어와 달리 함수가 호출되는 방식에 따라 동적으로 결정된다. 호출 상황에 따른 6가지 주요 동작 패턴을 정리했다.

---

📒 자바스크립트 this의 핵심: "누가 나를 불렀는가?"

자바스크립트에서 this는 기본적으로 자신을 호출한 객체를 가리킨다.

1. 전역 공간

전역 공간이나 일반 함수 내부에서의 this는 전역 객체(Global Object)를 가리킨다. (브라우저에서는 window, Node.js에서는 global)

// 브라우저 환경 기준
console.log(this === window); // true

this.myGlobalVar = "Hello";
console.log(window.myGlobalVar); // "Hello"

2. 일반 함수 호출

일반적인 함수로 호출될 때도 this는 전역 객체를 가리킨다. 단, 엄격 모드(Strict Mode)에서는 undefined가 된다.

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

showThis(); // 전역 객체 (window 또는 global)

function showThisStrict() {
  'use strict';
  console.log(this);
}

showThisStrict(); // undefined

3. 메서드 호출

객체의 프로퍼티로서 함수가 호출될 때(메서드), this는 해당 메서드를 호출한 객체(마침표 앞의 객체)를 가리킨다.

const user = {
  name: "Kim",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

user.greet(); // "Hello, my name is Kim" (this는 user 객체)

// 주의: 메서드를 일반 변수에 할당하고 호출하면 컨텍스트를 잃음
const looseGreet = user.greet;
looseGreet(); // "Hello, my name is undefined" (this는 전역 객체가 됨)

4. 생성자 함수 호출

new 키워드와 함께 생성자 함수를 호출하면, this는 새롭게 생성되는 인스턴스(객체) 자신을 가리킨다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person("Lee", 25);
console.log(person1.name); // "Lee" (this는 person1 객체에 바인딩됨)

5. 화살표 함수

화살표 함수는 자신만의 this를 가지지 않는다. 대신 함수가 정의된 위치의 상위 스코프(Lexical Scope)의 this를 그대로 물려받는다. 이를 렉시컬 this라고 한다.

const group = {
  title: "A Group",
  members: ["Kim", "Lee", "Park"],
  showList: function() {
    // 화살표 함수의 this는 외부 스코프(showList 메서드의 this = group)를 가리킴
    this.members.forEach((member) => {
      console.log(`${this.title}: ${member}`); 
    });
  }
};

group.showList(); 
// A Group: Kim
// A Group: Lee
// A Group: Park

6. 명시적 바인딩

개발자가 의도적으로 this를 특정 객체에 고정시키고 싶을 때 call(), apply(), bind() 메서드를 사용한다.

const obj1 = { name: "Object 1" };
const obj2 = { name: "Object 2" };

function sayName(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

// 1. call: 첫 번째 인자로 this를 지정, 나머지 인자는 쉼표로 전달
sayName.call(obj1, "Hello"); // "Hello, Object 1"

// 2. apply: 첫 번째 인자로 this를 지정, 나머지 인자는 배열로 전달
sayName.apply(obj2, ["Hi"]); // "Hi, Object 2"

// 3. bind: this가 고정된 새로운 함수를 반환 (실행은 하지 않음)
const boundSayName = sayName.bind(obj1);
boundSayName("Welcome"); // "Welcome, Object 1"

---

💡 간단 요약

호출 방식 (상황)	this가 가리키는 대상	특징
1. 전역 공간	전역 객체 (window 또는 global)	브라우저 환경에서는 window
2. 일반 함수 호출	전역 객체	엄격 모드('use strict')에서는 undefined
3. 메서드 호출	메서드를 호출한 객체	객체.메서드() 형식에서 마침표(.) 앞의 객체
4. 생성자 함수 호출	새롭게 생성되는 인스턴스 객체	new 키워드와 함께 호출할 때
5. 화살표 함수	상위 스코프(Lexical Scope)의 this	함수 자체의 this를 가지지 않음
6. 명시적 바인딩	개발자가 직접 지정한 객체	call(), apply(), bind() 메서드 사용