JavaScript 기본개념(3) 상속과 상속의 실습예제

JavaScript 상속 Java의 상속과 매우 유사한 점을 볼 수 있는데요. 기존 클래스 내용을 그대로 상속받아, 새로운 클래스를 만들어, 중복적인 변수들이나 메서드들을 제거하기 위해 사용합니다. 그럼 간단한 예시와 함께 말씀드려 볼게요.

동물 클래스를 만들고 멤버 함수를 만들어주면 자바스크립트에서 자동으로 프로퍼티 타입(Prototype)으로 등록을 하게 됩니다.

서론 :

1. 자바스크립트는 클래스에 멤버 함수를 만들게 되면 프로퍼티 타입으로 등록해 줍니다.

* 프로퍼티 타입이란 자바스크립트 내에서 객체 내부의 속성을 말하는 것으로, 객체는 곧 프로퍼티라고 할 수 있습니다.

프로퍼티는 키(Key)와 속성(Value)으로 이루어진 형식으로 할당되는데 여기서 키(Key)는, 문자열로만 가능하고, 따옴표가 없어도 됩니다.

그리고 속성(Value)은 속성값이라고도 부르며 어떤 값이든지(문자열, 숫자, 객체, 함수 아무거나) 상관이 없습니다.

프로퍼티에 접근하는 방법은 대괄호로 접근하는 방법과 점을 표기법을 이용한 접근 방법이 있습니다. 우리가 자바스크립트에서 console.log(변수명. 길이)를 출력할 때 자주 사용하기도 하죠.

console.log(변수명.변수 혹은 값)

 

본론

1. 자바스크립트 상속 예제를 위한 Animal 클래스 생성

class Animal {
    constructor(type,name,sound) {
        this.type = type;
        this.name = name;
        this.sound = sound;
    }

아래와 같이 클래스를 만들어 준 후, 우리는 함수를 함께 사용함으로써 출력을 도와볼 텐데요. 제대로 결괏값이 나오는지 확인해 볼게요. 

console.log('부모클래스 say()' + this. sound)

여기서 문자열은 부모클래스를 출력해 줄 것이고 this.sound는 변수에서 sound 소리를 가져올 것이기 때문에 this (부모 클래스로서 상속받은 내가 가지고 있는 sound를 불러올 것이다)라고 표현해 줄 겁니다.

 

그리고 데이터 값을 넣어보도록 해보겠습니다. 강아지의 이름은 댕댕이로, 멍멍이라고 우는 소리를 sound에 넣어줄 것이고요. 그리고 고양이의 이름은 네로로, 야옹이라는 소리로 울 수 있도록 작성해 봅니다.

const dog = new Animal('강아지','댕댕이','멍멍');
const cat = new Aniaml('고양이','네로','야옹');

 

그런데 이렇게 까지만 하면 "상속을 뜻하는 extends도 없고, 뭐 어쩔 건데?"라고 생각하실 수 있겠죠. 이제 하위 클래스들을 만들어볼게요. 이때까지는 이 예제를 설명하기 위한 빌드업이었어요.

 

저는 자식 클래스에서는, 댕댕이가 멍멍하고 네로가 야옹하는 것도 좋지만 사실 동물 친구들의 몇 살의 동물 친구들이 울고 있는지 알고 싶어서, 동물 친구들의 나이를 넣어보고 싶었습니다.

 

그러기 전에 java에서 처럼, constructor를 이용해 생성자를 만들어주고, 그리고 super를 이용해 "나는, 부모(클래스)님 중에 이름이랑 우는 거 가져올래" 도 적어주고, this.age = age; 를 선언해 줍니다.

class Dog extends Animal {
	constructor(name,sound,age){
    	supuer(name,sound);
        this.age = age;
        }

이제, 함수 오버라이드를 해줄 텐데요. 아래의 함수 명령어를 간단하게 표현한다면 이런 것입니다.

"나 출력할래 내가 설정한 동물들의 나이+ '살 짜리 강아지가' + 그리고 부모로부터 상속받은 소리 + 합니다"

say () {
	console.log(this.age+'살 짜리 강아지가'+
    this.sound+'합니다!');

그리고 마지막으로, 객체를 생성해 줍니다. 

const dog2 = new Dog('멍멍이','멍멍',2);
dog2.say();

결론

또, 고양이가 우는 것을 듣고 싶으면 고양이 버전으로 함수를, 그리고 오브젝트를 생성해서, 코드를 정리해 줍니다.

class Cat extends Animal{
    constructor(name,sound,age){
        super('고양이',name,sound);
        this.age = age;
    }
     // 함수 오버라이드 
     say(){
        console.log(this.age+'살 짜리 고양이가'
            +this.sound+' 합니다!');
    }
}
const cat2 = new Cat('야옹이','야옹',4);
cat2.say();

 

중간중간 작성하지 않은 constructor는 생성자의 개념으로 재정의해줌을, 그리고 오버라이드의 경우에는 자바와의 개념이 같음을 인지하고 있으면 충분히 이해할 수 있는 부분이라고 생각됩니다.