[JavaScript 문법] : Class의 상속(= Inheritance)

오늘은 Class에 대해 조금 더 알아보는 시간.

"상속" = Inheritance

https://playlist808.tistory.com/entry/JavaScript-%EB%AC%B8%EB%B2%95-Class-%EC%99%80-setter-getter-%EC%82%AC%EC%9A%A9-%EB%B0%8F-%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0

Start !

구글에 알맞은 이미지가 있어서 가져와 봤습니다.

Class는 독단적으로 존재할 수도 있지만, 경우에 따라 부모 Class, 자식 Class, 손자 Class 이런식으로 존재할 수도 있다.

---

위의 그림처럼 부모Class 가 가지고 있는 필수요소(= property) 또는 메서드(= method) 와 같은 기능들을

밑으로 내려주는 것이 바로 => 상속(= inheritance) 이다.

---

예로, 여러객체의 Animal을 만들수 있게 해주는 설계도(= class) 가 있다고 가정한다면,

animal 중에서도

dog 라는 객체만 만들어내는 class가 있을 수 있고,

cat 이라는 객체만 만들어내는 class도 있을 수 있다.

​

그럴 때 !! 객체지향의 속성 중 하나인 '상속'을 이용한다면,

class dog 또는 class cat 에 각각 따로 코드를 만드는 수고를 덜어도 된다는 것이다.

---

예를 들자면,

​

animal 이라는 class 에 name 과 age를 '필수요소' 로 가지고 있고,

dog 라는 새로운 class 에도 name 과 age 가 '필수요소'로 들어갈 예정이라면 ~!

​

우리는 class Dog 에 constructor(= 생성자 함수)를 다시 써 줄 필요가 없다는 뜻이다.

​

우선, 이해를 돕기 위해 animal class를 만들어보자.

---

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

    sayHi() {
        console.log(`내 이름은 ${this.name} 이고, 나이는 미운 ${this.age} 짤 >_< `);
    }
}

name 과 age가 property 고, sayHi 라는 method 를 갖는 Animal 이라는 class 를 만들어 보았다.

먼저, 위 코드가 짜여진대로 객체와 메서드를 잘 구현해 내는지 확인해 본다.

const animal1 = new Animal('춘식이', 7);
const animal2 = new Animal('황진이', 8);

console.log(animal1);
console.log(animal2);
animal1.sayHi();
animal2.sayHi();

이렇게 확인해보면,

정상적으로 내가 넣은 property 와 method 대로 animal 이라는 객체를 만들어 내는것을 확인했다.

---

여기서, 위와 같은 property, method 를 가진 Dog 라는 class를 만들고자 한다면,

아래와 같이 코드를 짤 수 있다.

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

    sayHi() {
        console.log(`내 이름은 ${this.name} 이고, 나이는 미운 ${this.age} 짤 >_< `);
    }
}

class Dog extends Animal {}

원래 있던 코드에 추가한것은 " class Dog extends Animal " <-- 이 한 줄 밖에 없다.

이것 만으로도 Dog 라는 객체가 생성이 되는지 확인해보자.

const cuteDog = new Dog('똘이', 3);
const prettyPuppy = new Dog('예삐', 2);

console.log(cuteDog);
console.log(prettyPuppy);
cuteDog.sayHi();
prettyPuppy.sayHi();

이렇게 확인하면,

Dog 라는 객체가 sayHi 라는 method 까지 가진채로 생성이 잘 되었다.

---

이렇게 상위 Class 의 기능들을 상속받아 하위 Class 들이 물려받는 것을 상속이라고 한다.

이 상속에서 기억해야 할 키워드는 'extends' 와 'super()' 가 있다.

​

1. extends : 사전적 의미는 아래 사진과 같다.

사용법은 위 코드에서 보는바와 같이,

1). 새로 만들 class 의 객체 명 옆에 extends 를 써주고

2). extends 다음에는 물려받을 상위 class 명을 적어주면 된다.

​

그러면 부모 클래스의 property 와 method 를 상속받은 자식 클래스가 만들어 지는 것이다.

---

2. super()

사용할 때 : 부모 class 로 부터 상속 받을 property 중에, 삭제 또는 추가하고 싶은 property 가 있는 경우에 사용.

*새로운 객체에 추가하고 싶은 method 가 있는 경우는 super() 를 사용하지 않고,

Dog class 의 {}안에 위의 sayHi 와 같은 방식으로 추가를 해주면 된다.

나는 부모 class 에는 없는,

"gender" 라는 porperty 를 추가해 보겠다.

사용법은 아래 코드와 같다.

 

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

    sayHi() {
        console.log(`내 이름은 ${this.name} 이고, 나이는 미운 ${this.age} 짤 >_< `);
    }
}

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

새로운 생성자함수, constructor 를 만들어주고, () 안에 추가할 "gender" 를 넣어주면 된다.

그 다음 {} 안에는 super() 를 넣어주는데,

super() 는 constructor 와 같다,

다만 여기서 super 가 가리키는 대상은 Dog 라는 객체가 아닌,

Animal을 가리킨다. 그래서 super 의 () 안에는 Animal 의 property 가 들어가는 것이다.

​

간단하게 풀어 설명해보면,

엄마 ! 나는 constructor(name, age, gender) 이런 Dog를 가지고 싶어 ~

그러니까 엄마가 물려준 super(name, age) 는 그대로 가져다 쓰고, 나는 gender 만 추가해서 만들게 ~ !!

라고, 위의 부모 클래스에게 알려주는 것이다.

---

순서

1. constructor 를 넣어서 property를 추가 또는 삭제, 변경 해준다.

2. super 를 통해서 상위 클래스에 알려준다.

3. 그 다음에 this.gender 로 객체지정을 해준다.

​

super() 를 사용하면서 유의할 점 :

1. super 를 constructor, 생성자 함수 {}내부에 써줘야 하고,

2. 새로이 추가한 property 를 this 로 지정해주기 전에 사용해주어야 한다.

​

그렇지 않다면 이런 오류를 만나게 될 것이다.

​

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor at new Dog === (아래 코드대로 코딩을 한다면, 만나게 되는 오류이다)

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

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    at new Dog (/Users/yoonzero/Desktop/Sparta/Week_05/20.js:14:9)
    at Object.<anonymous> (/Users/yoonzero/Desktop/Sparta/Week_05/20.js:26:17)

해석 : 'this' 로 지정 또는, new Dog에 파생된 생성자로 반환 되기 전에, 파생된 클래스(= Dog) 안에서 super를 외쳐야 한다.

​

위 코드는 this 로 gender 를 지정한 후에 super 를 호출했기 때문에,

엄마한테 말을 안하고 내 맘대로 지정해 쓴것과 같다. === 선조치 후보고.

---

이제 super() 를 사용해 내가 원한 Dog이 만들어졌는지 확인해보자.

const cuteDog = new Dog('똘이', 3, 'female');
const prettyPuppy = new Dog('예삐', 2, 'male');
console.log(cuteDog);
console.log(prettyPuppy);

위와 같이 확인해본다,

부모클래스에는 없던 gender 가 추가되어 잘 만들어진것을 확인할 수 있다.

---

오늘은 class 의 상속 기능에 대해서 알아보았다.

상속을 잘 이용한다면 , 보다 효율적으로 원하는 객체들의 옵션등을 수정하면서 뽑아내는 것이 가능하다.

상위 <-> 하위 개념을 가진 객체들을 생성해야 한다면, 상속 기능을 이용해야 겠다.

---

문 : ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor at new Dog

시 : super() 의 위치를 constructor 함수의 밖으로도 이동시켜보고, this 를 지정하기 전에 super를 넣어주었다.

해 : super() 는 constructor 함수의 {}안에 위치해야 하며, 부모로부터 상속받을 property 를 말해주고, this 로 추가한 property 를 지정해 주어야 한다.

알 : class 의 새로운 기능인 상속을 알게되면서, 내가 오늘까지 알았던 개념보다 확장된 class 의 개념을 이해하게 되었다. super() 의 사용법, 새로운 Error 메시지.

​

​

#javascript #문법 #class #super #상속 #하위클래스 #상위클래스 #부모클래스 #문시해알

#ReferenceError #오류 #오류해결 #this #순서_주의