[JS] javascript : ES6에서의 Class에 대해서.. ( 클래스 상속 )

ES6에 Class문법이 생겼다는 것을 저번에 배웠는데 ( 해당 글 참조 ) ES6의 Class에서도

java와 같이 상속이 가능하다. 오늘은 상속에 대해 알아보려고 한다.

 

상속(inheritance)이란?

==========================================================================

 

상속(inheritance)이란 기존의 클래스에 기능을 추가하거나 재정의하여 새로운 클래스를 정의하는 것을 의미합니다.

이러한 상속은 캡슐화, 추상화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나입니다.

 

상속을 이용하면 기존에 정의되어 있는 클래스의 모든 필드와 메소드를 물려받아, 새로운 클래스를 생성할 수 있습니다.

 

상속의 정의는 위와 같다. 

핵심은 기존의 클래스의 필드, 메서드를 물려받아 새로 생성하는 클래스에서 사용하는 것을 목적으로 한다.

 

그럼 바로 알아보자.

 

 

extends

==========================================================================

 

java를 이용해서 개발을 해본 사람이라면 친숙할 것이다. ES6에서도 extends를 이용하여 상속을 받는다.

 

 

기본문법

class [자식 클래스명] extends [부모 클래스명]{
	{ ............ }
}

 

 

이렇게만 해주면 부모 클래스에 있는 메서드나, 필드를 자식클래스에서 사용이 가능해진다. 아래 예제를 보자.

 

<script>

    let foodName = '국수'; //전역변수 선언

    class makeFood { //부모클래스 생성
        makeFood = () => {
            console.log(foodName + '을 만들었습니다.');
        }
    }

    class eatFood extends makeFood{ //자식클래스 생성 및 부모클래스 상속받음
        eatFood = () => {
            console.log(foodName + '을 먹었습니다.');
        }
    }
    
    let eatingFood = new eatFood(); //인스턴스 생성
    eatingFood.makeFood(); //부모클래스 함수호출
    eatingFood.eatFood(); //본인클래스 함수호출
	/*
    	결과 : 
        국수을 만들었습니다.
	국수을 먹었습니다.
    */
</script>

 

foodName이라는 전역변수를 선언하고, 부모가 될 makeFood와, 자식이 될 eatFood 클래스를 만들었다.

그리고 earFood를 통해 eatingFood라는 인스턴스를 생성하였다.

 

그리고 eatingFood 인스턴스를 통해

makeFood클래스의 makeFood함수와, eatFood클래스의 eatFoodg함수를 호출하였다.

 

즉 상속을 받은 eatFood클래스는 eatFood와 makeFood내의 필드/메서드를 사용할 수 있게 된 것이다...

 

 

하나 더 해보자.

 

<script>

    class makeFood {
        constructor(foodName){ // 생성자 선언
            this.foodName = foodName; // foodName이라는 변수값 할당
        }
        makeFood = () => {
            console.log(this.foodName + '을 만들었습니다.');
        }
    }

    class eatFood extends makeFood{
        eatFood = () => {
            console.log(this.foodName + '을 먹었습니다.');
        }
    }
    // eatingFood 인스턴스를 생성할 때, constructor에 들어갈 값을 인자로 넘겨준다.
    let eatingFood = new eatFood('비빔밥');
    eatingFood.makeFood();
    eatingFood.eatFood();
	/*
    	결과:
        비빔밥을 만들었습니다.
        비빔밥을 먹었습니다.
    */
</script>

 

이번에는 eatingFood 인스턴스를 생성할 때 인자로 '비빔밥'을 주었다. 이때 makeFood 클래스를 상속 받으므로,

makeFood의 constructor(생성자)의 값으로 넘어간다..

 

 

-----------------------------------------------------------------------------------------------------------------------------------

 

기존에는 아래와 같이 makeFood에 값을 넘겨주었는데, 처음에는 잘 들어갔지만, 밑의 eatFood를 생성하니

부모클래스인 makeFood까지 호출되어 constructor에 빈값이 들어가게 되었다..

즉 자식클래스가 생성될 때, 부모클래스도 재생성 되는 것 같다.

 

-- 기존코드
let makingFood = new makeFood('비빔밥');
let eatingFood = new eatFood();

결과
undefined을 만들었습니다.
undefined을 먹었습니다.