[JavaScript] class를 복사하는 extends / super

 

class, prototype, constructor를 지나 이제 자바스크립트 객체지향 문법의 끝판왕인 extends를 배워보도록 합시다.

 

 

 

class를 상속한 class를 만들 때 사용하는 extends

 

한 class와 유사한 class를 하나 더 만들고 싶은 경우가 있는데, 이 때 extends라는 문법을 사용할 수 있습니다.

extends를 사용하여 class를 만들면 기존에 있던 class의 내용을 그대로 복붙해서 만들어낼 수 있습니다.

즉, class에 class를 상속해서 만들 수 있게 도와주는 문법 입니다. 

 

그리고 extends된 오브젝트들은 super를 사용해서 값들을 받아와야 합니다.

super()는 'extends로 상속된 부모 class의 constructor()'를 의미합니다.

 

class Grandpa {
    constructor(name){
        this.lastname = 'Kim';
        this.firstname = name;
    }
}

class Parent extends Grandpa { // extends를 사용하여 Grandpa를 상속한다.
    constructor(name){
        super(name); // super를 사용하여 Grandfa의 constructor값을 가져온다.
        this.age = 50; // super를 사용하여야 this를 사용할 수 있다.
    }
}

var Child = new Parent('sangwoo');

console.log(Child); // Parent { lastname: 'Kim', firstname: 'sangwoo', age: 50 }

 

 

Grandpa에 있는 say()라는 함수를 Parent에서도 사용하고 싶다면, 이 때에도 super를 사용할 수 있습니다.

 

class Grandpa{
    constructor(name){
        this.lastname = 'Kim';
        this.firstname = name;
    }
    say(){
        console.log('안녕, 나는 Grandpa야');
    }
}

class Parent extends Grandpa{
    constructor(name){
        super(name); // constructor에 super를 사용하여 값을 상속받음
        this.age = 40;
    }
    say2(){
        console.log('안녕, 나는 Parent야');
        super.say(); // prototype에 super를 사용하여 say()함수를 상속받음
    }
}

var Child = new Parent('youngwoo');

console.log(Child.say2()) // 안녕, 나는 Parent야 안녕, 나는 Grandpa야

 

이처럼 super를 constructor안에서 쓰면 부모 class의 constructor를 상속받는것이고,

prototype안에서 쓰면 부모 class의 prototype을 상속받습니다.