자바스크립트 Super keyword and Override

모든  내용과 소스들은 다음과 같은 강의 플랫폼에서 응용하여  작성하였습니다.
출처: https://inf.run/xNcEg

[무료] [코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스 - 인프런 | 강의

 

자바스크립트 에서 Super Keyword 와 Override(덮어쓴다)에 대해 알아보겠습니다. 

일단 Super 라는 키워드는  상속(inheritance)에서 자식 클래스와 부모클래스 중 부모 클래스에 해당합니다.   주로 슈퍼클래스(super class) 또는 부모 클래스로 읽습니다. 자식 클래스는  차일드 클래스(child class)라고도 하죠. 

 

부모 클래스는 다른 클래스 들에게 상속을 제공해주는 클래스입니다. 반대로 자식 클래스가 부모 클래스에게 상속을 제공하지는 못합니다.  상위 클래스에서 하위클래스 한테 는 상속이 가능하지만 반대로 하위클래스가 상위 클래스에 상속을 제공하지 못한다는 것입니다.  전체적인  소스를 보면서 주석 하나하나 설명이 들어가 있기 때문에  확인하시면 좋을 것 같습니다. 

/**
 * Super and Override 
 */
class IdolModel{
    name;
    year;

    constructor(name,year){
        this.name = name;
        this.year = year;
        
    }
    sayHi(){
        return `안녕하세요 에스파  ${this.name}입니다.`; //부모 클래스
         // String 값을 반환해주는 함수를 IdolModel에다 선언
    }
}

class FemaleIdolModel extends IdolModel{ //FemaleIdolMdoel 을 만들어서  확장하여 IdolModel를 상속을 받도록 함
   //특수 프로퍼티(노래, 춤 , 랩)를 FemaleIdolModeld 안에 정의
    part; 
    //FemaleIdolMoel를 인스턴스화 할때는 Constructor에다 name,year 말고도 다른 프로퍼티를 넣고 싶을때 방법
    constructor(name, year, part){ //Constructor - 생성자 함수 재정의하고 프로퍼티 추가
        
        super(name, year); //Super Keyword 사용 - 부모클래스 또는 Parrent Class, 일반적으로 생성자 함수(Constructor)를 실행  
        this.part = part; //저장하지 않은 part 메서드만 따로 저장을 하면 된다
    } 
    
    sayHi(){
        //sayHi 함수 재정의
        // return `안녕하세요 에스파 ${this.name}입니다. ${this.part}를 맡고있습니다.`;  -> 이렇게 하게되면 결과 값이 undefined 값이 나온다.

        return `${super.sayHi()} ${this.part}를 맡고 있습니다.`;
        //부모클래스에 sayHi 함수를 실행
        //super 키워드를 사용할 때 함수는 실행할 수가 있다.
        //constructor(생성자) 아닌 곳에서는 this 키워드를 사용
    }
}  


const winter = new  FemaleIdolModel('윈터', 2001, '보컬');
console.log(winter);
//상속을 받으면은 생성자 또한 상속을 받게되는데 만약 생성자를  Override(덮어쓴다)를 하고싶으면 따로 생성자를 재정의해주면 된다.

const karina = new IdolModel('카리나', 2000); 
console.log(karina);
console.log(karina.sayHi()); //sayHi 메서드 호출
//sayHello 메서드를 IdolModel 에다 정의를 했기 때문에 마찬가지로 FemaleIdolModel 에서 상속을 할수 있다
console.log(winter.sayHi()); //sayHi 함수가 상속이 되었기 때문

 

출력결