자바스크립트 화살표 함수 this

자바스크립트에서 this는 일반 함수에서 사용할 때, 화살표 함수에서 사용할 때 의미가 달라집니다. 일반 함수에서는 this를 재정의 해서 사용하게 되고, 화살표 함수에서는 this를 상속해서 사용하게 됩니다. 예를 들면 객체에서 일반 함수를 정의했다면 this는 최상위 객체인 window를 재정의 해서 객체 자체를 의미하게 되고 화살표 함수를 정의했다면 this는 window 객체를 상속받아서 window 객체를 의미하게 됩니다.

 

 

사용법

 

const user = {
  id: "user01",
  age: "20",
  display1: function () {
    return `name:${this.id} age:${this.age}`;
  },
  display2: () => {
    return `name:${this.id} age:${this.age}`;
  },
  display3: function () {
    setTimeout(() => {
      console.log(`name:${this.id} age:${this.age}`);
    }, 3000);
  },
};
console.log(user.display1()); // name:user01 age:20
console.log(user.display2()); // name:undefined age:undefined
console.log(user.display3()); // name:user01 age:20

 

display1 함수의 this는 user 객체를 의미하고, display2의 this는 window 객체를 의미해서 undefined가 출력이 됩니다. 그리고 display3 함수 안에서 화살표 함수의 this는 상속을 받았기 때문에 user 객체를 의미합니다.