[JavaScript] 자바스크립트의 this

자바스크립트에서 this는 함수가 호출되는 방식에 따라 달라지는 특수한 객체를 가리킵니다.

쉽게 말해, this는 "누가 나를 불렀냐"를 의미해요.

 

이번 포스트에서는 this를 상황별로 살펴보죠!

---

함수에서의 this

• 함수가 일반적으로 호출되면, this는 전역 객체를 가리킵니다. 브라우저에서는 window 객체가 전역 객체죠.

function sayHi() {
  console.log(this)
}
sayHi()  // 출력: window 객체

---

메서드에서의 this

• 객체 안에 있는 메서드에서 this는 그 메서드를 호출한 객체를 가리킵니다.

const person = {
  name: 'Alice',
  sayHi: function() {
    console.log(this.name)
  }
}
person.sayHi()  // 출력: Alice

 

=> 위 예시에서는 this가 person을 가리키게 됩니다.

---

생성자 함수에서의 this

• new 키워드를 사용해 객체를 생성할 때, this는 새로 만들어진 그 객체 자체를 가리킵니다.

function Person(name) {
  this.name = name
}
const person1 = new Person('Bob')
console.log(person1.name)  // 출력: Bob

 

=> 위 예시에서는 this가 person1을 가리키게 됩니다.

---

화살표 함수에서의 this

• 화살표 함수는 일반 함수와 달리 자신만의 this를 가지지 않고, 외부 함수의 this를 그대로 사용합니다.

const person1 = {
  name: 'Charlie',
  sayHi: function() {
    const innerFunc = () => {
      console.log(this.name)
    }
    innerFunc()
  }
}
person1.sayHi()  // 출력: Charlie


const person2 = {
  name: 'Charlie',
  sayHi: function() {
    function innerFunc () {
      console.log(this.name)
    }
    innerFunc()
  }
}
person2.sayHi()  // 출력 없음