본문 바로가기

나의 FE피봇이야기/Javascript

[JS] class 상속과 super

※이 자료는 생활코딩 영상을 보고 개인의 생각과 가미하여 작성한 글입니다.(업데이트 : 2023.09.16)

 

상속 : extends

상속은 새로 만든 class에 extends '기존 class'를 불러는 과정이다.

사용하는 이유는 새로운 method를 추가하고 싶은데 활용한다. 물론 기존 class를 수정해도 되지만 1) 내가 접근할 수 없거나, 2) 라이브러리가 업데이트 되면 내가 수정한 코드가 사라질 수 있다.

 

부모 바라봐 : super

super는 코드를 단순화 하기 위한 방법으로 사용되는 함수로써(?) 부모(기존 class)를 불러와 코드를 작성한다. 나아가 나만(새롭게 만든 class) 가지고 있는 method 등을 작성할 수 있게 된다.

 

 

class PersonPlus extends Person : super

 

실행

console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());

 

위의 이미지를 보면 super를 통해서 class Person의 property 정보를 가져오게 한다.

 

class PersonPlus extends Person은 class Person과 전달받는 인자의 차이가 있다.

  • class Person { constructor(name, first, second) ~ }
  • class PersonPlus extends Person { constructor(name, first, second, third) ~}