이민재의 개발일지

JAVA를 공부할 때만 class와 상속에 대해서 알고 있었는데

javascript 로도 class를 이용해서 좀 더 함수들을 간단하게 정리할 수 있어서 놀랐다.

좀 더 확실하게 실습해보기 위해 내가 관심이 많은 분야인 롤을 이용해 코드를 만들어보았다.

class LeagueOfLegend {	// 모든 요소들이 가지고 있을 만한 속성이나 행동(메서드)들을
						// 정의해서 상속시켜주는 부모 클래스입니다.
  constructor(type = 'leagueOfLegend') {
    this.type = type;
  }
  static isUnit(unit) {
    return unit instanceof LeagueOfLegend;
  }
  moving_by_X() {
    console.log('x축으로 움직인다.');
  }
  skill_q() {
    console.log('q스킬을 사용한다.');
  }
}

class Ad_Chanpion extends LeagueOfLegend { // 자식 클래스이고 범위가 부모보다 좁습니다.

  constructor(type, firstName, lastName, position) {
    super(type);
    this.firstName = firstName;
    this.lastName = lastName;
    this.position = position;
  }
  sayName() {
    console.log(`내 이름은 ${this.firstName} ${this.lastName}`);
    super.skill_q();
    super.moving_by_X();
  }
}

// 생성자를 호출해줍니다.
const twistedfate = new Ad_Chanpion('마법사', '트위스티드', '페이트', '미드캐리');

// 만들어둔 객체를 이용해서 메서드를 호출합니다.
twistedfate.sayName();

결과는 아래와 같이 나온다.

호출은 맨 밑의 twistedfate.sayName(); 에서 한번 해주었고

sayName()에서는 자신이 호출되었을 때 자신의 이름을 console.log()를 해준 후에

상속해준 상위 단계 클래스의 skill_q 메서드와 moving_by_x를 사용한 모습이다.

여기에서 주의 깊게 봐야할 것은

1. this가 누구를 지칭하는지

2. Super로 누가 실행되는지

등이 있고, 처음에 이쪽을 연습할 때 가장 많이하는 실수 중에 하나가(제가 많이 했던 실수를 말하는겁니다.)

1) 호출을 하지 않거나

2) 호출을 했다고 생각했지만 뒤에 "()" 를 붙이지 않아서 메서드가 실행이 되지 않는 경우가 있다.