[JS] 자바스크립트에서 this란?

📌this란?

자바스크립트에서 this는 함수가 어떻게 호출되었는지에 따라 달라지는 특별한 키워드
즉, 정의된 위치가 아니라 "호출된 방식" 에 따라 this가 가리키는 대상이 바뀐다.

---

📌 상황별 this 정리

1. 일반 함수 호출

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

showThis(); // 브라우저 환경: window, strict 모드: undefined

• 일반 함수에서 this는 전역 객체(window) 를 가리킨다.
• 단, "use strict" 모드에선 undefined가 된다.

---

2. 객체의 메서드로 호출

const user = {
  name: 'Alice',
  sayHi() {
    console.log(this.name);
  }
};

user.sayHi(); // "Alice"

• 객체 안에서 함수를 호출하면 this는 그 객체 자신을 가리킨다.

---

3. 화살표 함수

const user = {
  name: 'Bob',
  sayHi: () => {
    console.log(this.name);
  }
};

user.sayHi(); // undefined (또는 전역 name)

• 화살표 함수는 자신만의 this를 가지지 않는다.
• 정의된 시점의 외부 스코프의 this를 그대로 사용한다.

---

4. 예제 비교

const name = "전역 이름";

const user = {
  name: "객체 이름",
  sayHi1: function () {
    console.log("sayHi1:", this.name);
  },
  sayHi2: () => {
    console.log("sayHi2:", this.name);
  }
};

user.sayHi1(); // "sayHi1: 객체 이름"
user.sayHi2(); // "sayHi2: 전역 이름"

• sayHi1: 일반 함수 → this는 호출한 객체 user
• sayHi2: 화살표 함수 → this는 외부 스코프(전역)

---

5. setTimeout과 this

const user = {
  age: 25,
  getAge() {
    console.log(this.age);
  }
};

setTimeout(user.getAge, 1000); // undefined

setTimeout은 user.getAge를 일반 함수처럼 호출해서 this가 바뀜

해결방법 

setTimeout(() => user.getAge(), 1000);       // 25
setTimeout(user.getAge.bind(user), 1000);    // 25

---

6. 함수 외부에서 할당한 경우

function hello() {
  console.log("hello", this);
}

const obj = {
  say: hello
};

obj.say();     // obj
hello();       // window (or undefined in strict mode)