Tech/Javascript

[Javascript] super

lonnie(동현) 2021. 1. 3. 12:59

1. super를 왜 사용하는가?

 부모 클래스의 기능을 수행하면서, 부모가 하지 못하는 기능을 자식 클래스만 하도록 하기 위해 super를 사용한다.


2. super의 사용 예시

 예를 들어, 아래와 같은 부모, 자식 클래스가 있다고 가정해보자. 

부모 클래스와 자식 클래스 선언

 여기에 third라는 항목을 추가하고 싶다면? 어떻게 하면 될까? 부모 클래스에 있는 것들을 가져오고, 새로운 항목을 추가하여 코드를 짜 봤다. 이대로 실행시키면 될까?

원래의 자식 클래스에 third 항목을 추가하여 코드 수정

 다음과 같이 ReferenceError가 발생된다. 에러에 따르면, 'this'에 접근하기 전 또는 자식 클래스에서 return 하기 전에 자식 클래스에서 super 생성자를 호출해야 한다고 말한다. 따라서, 자식 클래스에서 super 생성자를 사용해야만 정상적으로 작동한다는 뜻이다.

 첫번째로 super 뒤에 ()(괄호)가 붙으면 super는 부모 클래스의 생성자가 된다. contructor 함수 부분에서 부모 클래스의 contructor와 동일하게 super(name, first, second); 로 코드를 짜면 된다. 이렇게 하게 되면, 자식 클래스(Personplus)의 부모 클래스(Person)의 생성자가 호출이 되고, 생성자 안의 property들이 세팅된다. 따라서 자식 클래스는 추가할 항목만 적어주면 된다. 

super 생성자를 통해 부모 클래스의 생성자를 불러오고, 자식 클래스의 항목을 추가

 두번째로 super 뒤에.(점)이 오게 되면 super는 부모 클래스가 된다. 따라서 아래와 같이 코드를 작성하게 되면 부모 클래스의 method를 바로 불러올 수 있게 되고, 추가할 항목을 적어주면 된다.

super 클래스를 통해 부모 class의 method를 불러오고, 새로운 항목 추가

 

728x90
반응형