[JavaScript_study] 상속 (extends)

* 상속(extends)

• 비슷한 유형의 class가 있을 경우 상속을 이용하면 더 간결하고 효율적으로 사용이 가능하다.

* super

• 내가 상속하고 있는 부모를 의미한다.
• 부모의 생성자 함수를 호출해서 부모의 생성자에 필요할 정보를 전달해주고
• 함수안에서도 super다음에 부모의 함수를 호출하면 상속하는 class의 함수를 먼저 호출하고 추가적인 작업을 할 수 있다.
  • ex) super.eat()
• 내가 필요한작업후 부모 함수를 호출하면 super와 위아래로 자리만 바꿔주면 된다.

 

* 오버라이딩 (overriding)

• 자식 class에서 부모 class에 있는 함수를 덮어 씌운다.
• 위의 예시에서 Animal에도 eat메서드가 있지만 해당 행동을 그대로 덮어씌워서 다른 행동을 만든다.
• 부모 class의 기능을 그대로 유지하면서 추가적인것을 하고싶다면 super()키워드를 이용하여서 부모 class의 메서드를 호출하고 나서 나의 추가적인 작업을 할수도 있다. 

// 비슷한 유형의 class가 있을 경우 상속을 이용하면 더 간결하고 효율적으로 사용이 가능하다.
// class Tiger {
//   constructor(color) {
//     this.color = color;
//   }
//   eat() {
//     console.log('먹자!');
//   }
//   sleep() {
//     console.log('잔다');
//   }
// }

// class Dog {
//   constructor(color) {
//     this.color = color;
//   }
//   eat() {
//     console.log('먹자!');
//   }
//   sleep() {
//     console.log('잔다');
//   }
//   play() {
//     console.log('놀자아~!');
//   }
// }

class Animal {
  constructor(color) {
    this.color = color;
  }
  eat() {
    console.log('먹자!');
  }
  sleep() {
    console.log('잔다');
  }
}

class Tiger extends Animal {}
const tiger = new Tiger('노랑이');
console.log(tiger);
tiger.sleep();
tiger.eat();

class Dog extends Animal {
  constructor(color, ownerName) {
    super(color);
    this.ownerName = ownerName;
  }
  play() {
    console.log('놀자아~!');
  }

  // 오버라이딩 overriding
  // 자식 class에서 부모 class에 있는 함수를 덮어 씌운다.
  // Animal에도 eat메서드가 있지만 해당 행동을 그대로 덮어씌워서 다른 행동을 만든다.
  // 부모 class의 기능을 그대로 유지하면서 추가적인것을 하고싶다면 
  // super()키워드를 이용하여서 부모 class의 메서드를 호출하고 나서
  // 나의 추가적인 작업을 할수도 있다. 
  eat() {
    // 부모 class의 eat메서드를 가져온다.
    super.eat();
    // 추가적인 행동
    console.log('강아지가 먹는다!');
  }
}
const dog = new Dog('빨강이', '엘리');
console.log(dog);
dog.sleep();
dog.eat();
dog.play();