[JavaScript] class의 상속

❓상속(inheritance) 이란?

class Grub {
  // TODO..
  constructor() {
    this.age = 0;
    this.color = "pink";
    this.food = "jelly";
  }
}

Grub이란 class를 생성해 보겠습니다.

class Bee 
  // TODO..
  constructor() {
    this.job = "Keep on growing";
  }
}

추가로 아래에 Bee라는 class를 생성하였습니다.

class Bee에는  age, color, food의 속성 값을 넣고 싶다면 어떻게 해야 할까요❓
class grub에 있는 age.color, food의 속성 값을 불러온다면 더 편하겠지요? 바로 이 개념이 상속입니다.

만약 위의 코드의 경우 상속을 사용하게 된다면 속성의 값들을 제공하는 함수 Grub이 상위 클래스가 되어 속성의 값들을 받는 Bee라는 하위 클래스에게 속성 값들을 전달해 주게 됩니다.

 

🤝Extends(상속의 연장)

• 기존의 존재하는 class를 상속받기 위해서는 extends를 사용하여야 합니다.
• 부모의 메서드를 그대로 사용할 수 있으며 오버 라이딩할 필요 없이 부모에 구현돼있는 것을 직접 사용 가능하다.

상속받으려는 class(Bee) 옆에 상속해 주는 class(Grub) extends 한다

class Bee extends Grub
  // TODO..
  constructor() {
    this.job = "Keep on growing";
  }
  ageoutput(){
    console.log(`I am ${this.age} Bee`);
  }
}
bee = new Bee();
bee.ageoutput();
//I am 0 Bee

상위 class Grub의 age의 값을 불러와서 0을 출력 한걸을 알 수 있다.

 

📚🤏Super

• 자식 클래스 내에서 부모 클래스의 생성자이자 메서드 접근 역할로 사용됩니다.
• super키워드는 하나만 사용되거나 this키워드 사용되기 전에 호출되어야 합니다.

class Bee extends Grub
  // TODO..
  constructor() {
  //super키워드 선언
 	super();
    this.job = "Keep on growing";
  }
  
}
bee = new Bee();
console.log(bee.age === 0)//true
console.log(bee.color === 'pink')//true
console.log(bee.food === 'jelly')//true

super키워드를 사용하면 this의 사용을 줄일 수 있습니다.

 

🦍➡🐒메서드 오버 라이딩

• 메서드 오버 라이딩이란 상속받은 부모 클래스의 메서드를 재정의하여 사용하는 것을 의미합니다.

class Bee extends Grub
  // TODO..
  constructor() {
    this.job = "Keep on growing";
  }
  agecoloroutput(){
    console.log(`I am ${this.age} Bee`);
    console.log(`I am ${this.color} Bee`);
  }
}
bee = new Bee();
bee.agecoloroutput();
//I am 0 Bee
//I am pink Bee
age값은 Grub의 속성값을 상속 받길 원하지만 color값은 yello로 재정의를 원하는 경우

age의 값은 원하지만 개별적으로 따로 속성 값을 설정해야 할 경우 오버 라이딩을 통해 메서드를 다시 정의할 수 있습니다.

class Bee extends Grub
  // TODO..
  constructor() {
    this.job = "Keep on growing";.
    this.color = 'yello'
  }
  agecoloroutput(){
    console.log(`I am ${this.age} Bee`);
    console.log(`I am ${this.color} Bee`);
  }
}
bee = new Bee();
bee.agecoloroutput();
//I am 0 Bee
//I am yello Bee

 

❗메서드 오버 라이딩 조건 

• 오버 라이딩이란 메서드의 동작만을 재정의하는 것이므로, 메서드의 선언부는 기존 메서드와 완전히 같아야 합니다. 하지만 메서드의 반환 타입은 부모 클래스의 반환 타입으로 타입 변환할 수 있다면 타입을 변경할 수 있습니다.

 

• 부모 클래스의 메서드보다 접근 제어자를 더 좁은 범위로 변경할 수 없습니다

 

• 부모 클래스의 메서드보다 더 큰 범위의 예외를 선언할 수 없습니다.

 

🔥Instanceof함수를 사용하여 class  확인하기

instanceof함수는 상 공과계도를 확인할 때 사용됩니다. 상속 관계도를 활용해 객체의 클래스에 속하는지 아닌지 존재 여부를 확인할 수 있습니다.

bee = new Bee();

console.log( bee instanceof Bee ); // true
//bee가 class Bee의 객체인지 여부를 알려준다

❓bee가 Bee클래스 객체일 때 Bee의 상위 클래스인 Grub를 넣으면 어떻게 될까요?

bee = new Bee();
console.log( bee instanceof Gurb ); // true

👉여기서 나오는 개념이 전에 공부했던 peototype chain이다.
➡➡현재 클래스에 존재하지 않으면 상위 클래스로 올라가게서 찾게 된다.
class Bee의 상위 class는 Grub이므로 하위 클래스인 class Bee에 속한다면 class Grub에도 bee는 속하게 된다.

https://samsamgoo.tistory.com/50

[JavaScript]Prototype과 Protypechain