본문 바로가기

프론트앤드 수업

[javascript] extends ! 클래스의 상속, 오버라이딩

728x90

* extends 키워드
- 클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있다.
- 기존에 존재하던 기능을 토대로 새로운 기능을 만들 수 있습니다.

* 메서드 오버라이딩
상속받은 클래스의 메서드를 새로운 기능으로 재정의
- 키워드 super을 사용하면 부모클래스의 정의된 메서드도 사용 가능
- super는 부모 생성자를 호출하는데, 자식 생성자 내에서만 사용할 수 있음.

*생성자 오버라이딩
- 상속 클래스의 생성자에겐 반드시 super()를 호출해야합니다.
class Animal {
constructor(name){
this.speed = 0;
this.name = name;
}
}
class Rabbit extends Animal{
constructor(name, earLength){
super(name); // 오버라이딩
this.earLength = earLength
}
}

 //동물 클래스
        class Animal {
            constructor(name){
                this.speed = 0;
                this.name = name;
            }
            run(speed) {
                this.speed = speed;
                console.log(`${this.name}은 속도 ${this.speed}로 달립니다.`)
            }
            stop(){
                this.speed = 0;
                console.log(`${this.name}이 멈췄습니다.`)
            }
        }
        // 토끼는 동물이므로 동물관련 메서드가 담긴 Animal을 상속받아서 만들기
        class Rabbit extends Animal{
            //생성자 오버라이딩
            constructor(name, earLength){
                super(name); // 반드시 사용해야함 안하면 에러
                this.earLength = earLength
            }
            hide() {
                console.log(`${this.name}가 숨었습니다.`)
            }
            stop() { // 오버라이딩
                super.stop(); // super요소를 사용하여 부모요소의 메서드도 함께실행
                this.hide(); 
            }
        }
        let animal = new Animal('동물');
        animal.run(10); // 동물은 속도 10으로 달립니다.
        animal.stop(); // 동물이 멈췄습니다.
        let rabbit = new Rabbit('흰토끼',10);
        rabbit.run(5); // 흰토끼은 속도 5로 달립니다.
        rabbit.stop(); // 흰토끼가 숨었습니다. , 멈췃습니다. 함께호출
        // 상속받은 Animal의 메서드를 모두 사용할 수 있고 수정해 사용할 수도 있다(오버라이딩)
        console.log(rabbit) // speed0, name = '흰토끼' earLength = 10
728x90
댓글