this - 메서드 호출

메서드 내부의 this

메서드 내부의 this에는 메서드를 호출한 객체가 바인딩된다

예시코드

const food = {
  type: 'fruit',
  fruits: {
    apple: {
      name: '사과',
      introduce: function() {
        console.log(`${this.name}${this.type}이다`);
      },
    },
  },
};

food.fruits.apple.introduce();
// 사과는 undefined이다
  • 메서드 내부의 this에는 메서드를 호출한 객체가 바인딩된다 위의 코드에서 this는 food.fruits.apple 이다. food.fruits.apple 에는 type 이라는 프로퍼티가 없으므로 this.type 은 undefined를 반환한다

해결방법

type을 가지고 있는 food2 객체를 사용한다

const food2 = {
  type: 'fruit',
  fruits: {
    apple: {
      name: '사과',
      introduce: function() {
        console.log(`${this.name}${food2.type}이다`);
      },
    },
  },
};

food2.fruits.apple.introduce();
// 사과는 fruit이다

Written by@Heaeun
코드리뷰, TDD, 함께 자라기를 지향하는 프론트엔드 개발자입니다

GitHub