자바스크립트 Javascript : Class 상속기능

class 라는 문법이 있습니다. 

constructor, prototype 을 이용한 상속기능을 만들어 주는 문법입니다. 

 

ES6 class 키워드로 구현하는 constructor 기계만들기

ES6 class라는 신문법으로 constructor를 만드시려면 이렇게 따라치시면 됩니다. 

class 부모 {
  constructor(){
    this.name = 'Kim'
  }
}

var 자식 = new 부모();

끝입니다. 예전 function 부모(){} 이렇게 기계를 만드는 문법과 똑같은 문법입니다. 

이제 new 키워드를 이용해서 방금 만든 부모라는 기계에서 오브젝트를 새로 생성할 수 있는 것이고요.

constructor()라고 쓴 부분에 예전처럼 this.name 어쩌구 하시면 새로 생성되는 오브젝트들에 값을 부여할 수 있습니다. 

 

상속가능한 함수를 추가하려면 어떻게 해야할까요?

1. 함수를 this.sayHi 이렇게 constructor 안에 추가하는 방법

2. 기계의 prototype에 추가하는 방법  

 

1번 방법

class 부모 {
  constructor(){
    this.name = 'Kim';
    this.sayHi = function(){ console.log('hello') }
  }
}

var 자식 = new 부모();

그럼 새로생성되는 자식은 sayHi() 함수를 직접 가지게 되며 자유롭게 쓸 수 있습니다. 

 

2번 방법

class 부모 {
  constructor(){
    this.name = 'Kim';
  }
  sayHi(){ 
    console.log('hello') 
  }
}

var 자식 = new 부모();

이런 식으로 하시면 됩니다. 

오브젝트에 함수추가하듯 하시면 됩니다. 

그럼 자식은 sayHi()라고 썼을 때 부모의 prototype에 있던 sayHi() 함수를 쓸 수 있습니다.

(혹은 그냥 부모.prototype.sayHi = function(){} 이렇게 하셔도 됩니다.)

 

2번 방법 같이 프로토타입을 사용하여 메서드를 공유하면 메모리 사용량을 줄이고 효율적인 코드를 작성할 수 있습니다.  

 

참고로 알아두는 Object.getPrototypeOf()

이 함수 안에 오브젝트를 넣으시면 부모 prototype을 출력해줍니다. 

이 오브젝트가 대체 누구로부터 prototype을 상속받고 있는지를 알려주는 함수죠.

__proto__라는 키워드와 비슷한 역할을 한다고 보시면 됩니다. 

 

constructor안에 파라미터 추가하기

ES6 방식으로 constructor 만들 때 파라미터를 추가하려면 이렇게 하시면 됩니다. 

class 부모 {
  constructor(이름, 나이){
    this.name = 이름;
    this.age = 나이;
  }
}

var 자식 = new 부모('Park', 30);

이런 식으로 하시면 파라미터를 넣어서 constructor를 만들 수 있습니다. 

 

class를 복사하는 extends / super

class를 상속한 class를 만들고 싶을 때 쓰는 extends

할아버지 class를 하나 만들었다고 칩시다. 

할아버지 class는 성과 이름이라는 속성을 가지고 있습니다. 

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

그럼 이제 new 할아버지() 뭐 이런식으로 하면 새로운 object를 쉽게 생성할 수 있겠죠?

그런데 이 class가 너무나도 유용한 나머지 이것과 유사한 class를 하나 더 만들고 싶습니다. 

직접 class를 하나 더 만들어서 내용을 복붙해도 괜찮겠지만, class의 내부의 코드가 길면 코드가 길어져서 불편해질 수 있습니다.

 

그래서 예전 개발자들이 extends라는 문법을 만들었는데, 이걸 이용해서 class를 만드시면 기존에 있던 class의 내용을 그대로 복붙해서 만들어낼 수 잇습니다. 

있어보이게 말하면 "다른 class를 상속해서 만들 수 있게 도와주는 문법"이죠. 

extends 키워드
- 클래스를 다른 클래스의 자식 클래스로 만들기 위해 사용됩니다.
- 자식 클래스는 다른 클래스의 모든 메서드와 속성을 상속합니다.
- 상속은 코드 재사용성을 높이는데 유용합니다.

 

그래서 할아버지 class를 상속하는 아버지 class를 만들어보겠습니다. 

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

class 아버지 extends 할아버지{

}

extends는 이렇게 쓰면 됩니다. 

그럼 이제 할아버지라는 class를 그대로 복붙한 아버지라는 class가 생성됩니다. 

new 아버지('만수'); 이렇게 하시면 성과 이름을 가진 object 자료가 하나 생성됩니다.

 

근데 아버지라는 class에는 새로운 속성을 추가하고 싶으면 

당연히 아버지 constructor안에 내용을 추가하시면 됩니다. 

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

class 아버지 extends 할아버지{
  constructor(){
    this.나이 = 50;
  }
}

이렇게 하면 new 아버지() 했을 때 생성된 오브젝트들은 {성, 이름, 나이} 속성들을 가지겠군요. 

하지만 이러면 에러가 납니다. 

super를 써야된다고 에러가 나네요. 

 

그래서 super 를 사용해주면

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

class 아버지 extends 할아버지{
  constructor(){
    super();
    this.나이 = 50;
  }
}

super()라는 함수는

"extends로 상속중인 부모 class의 constructor()"를 의미합니다. (암기사항)

쉽게 말하면 할아버지 class의 constructor() 이거랑 똑같다는 소리입니다. (암기해야됨)

그래야 이제 에러없이 this.나이 이런걸 추가하실 수 있습니다. (암기)

super 키워드
- super 키워드는 부모 클래스의 생성자를 호출하는데 사용됩니다.
- 자식 클래스의 생성자에서 super()를 호출하면 부모 클래스의 초기화 코드가 실행됩니다.
- super를 사용하여 부모 클래스의 속성과 메서드에 접근할 수 있습니다.

 

근데 할아버지 class의 constructor()에는 name 파라미터를 입력할 수 있었죠?

그것도 똑같이 따라서 명시해주셔야 할아버지가 가진 모든 속성들을 정확히 상속받을 수 있습니다. 

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50;
  }
}

할아버지 constructor()에 name이라는 파라미터가 있던걸 그대로 아버지 constructor()에도 따라했습니다. 

 

그럼 예상해봅시다.

Q. 위 코드 하단에 var a = new 아버지('만수'); 이렇게 적으면 a라는 변수는 어떤 내용을 가지고 있을까요?

1. a라는 변수는 아버지라는 class로부터 새로 생성된 오브젝트입니다. 

2. 그래서 할아버지가 가지고 있던 성, 이름 그리고 아버지가 가지고 있던 나이를 전부 물려받았습니다.  

3. 그리고 this.이름 자리에는 '만수'를 넣어 실행했습니다.  

 

그래서 { 성 : 'Kim', 이름 : '만수', 나이 : 50 } 이라는 오브젝트가 됩니다. 

 

할아버지에 메소드(함수)를 추가한다면

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
  sayHi(){
    console.log('안녕 나는 할아버지')
  }
}

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50;
  }
}

var a = new 아버지('만수');

그럼 이제 a라는 오브젝트는 sayHi()라는 함수를 쓸 수 있습니다.

 

a라는 오브젝트가 a.sayHi() 이렇게 사용한다면

1. a라는 오브젝트에 sayHi가 있는지 물어보고

2. 없으면 아버지.prototype에 sayHi가 있는지 물어보고 

3. 없으면 할아버지.prototype에 sayHi가 있는지 물어보고 

이런 식으로 sayHi를 실행하기 위해 부모님을 확인해봅니다. 

 

근데 sayHi()라는건 할아버지.prototype에 추가된 함수이기 때문에 a라는 오브젝트는 sayHi() 함수를 실행할 수 있습니다. 

 

근데 class간에 함수를 상속하고 싶으면 어떻게 해요?

아버지라는 class에 함수를 만들고 싶습니다. 근데 할아버지 class에 있던 sayHi()라는 함수를 그대로 아버지 class에 가져와서 활용하고 싶은 것입니다. 

 

그럴 때 어떻게 합니까? 이 때도 super를 쓰시면 됩니다.

 

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
  sayHi(){
    console.log('안녕 나는 할아버지')
  }
}

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50;
  }
  sayHi2(){
    console.log('안녕 나는 아버지');
    super.sayHi(); ◀◀◀◀◀◀◀◀◀◀◀◀
  }
}

var a = new 아버지('만수');

super라는걸 저렇게 prototype 함수 안에서 쓰시면 아까의 super와 약간 다른 의미가 됩니다.

여기서의 super는 부모 class의 prototype을 의미합니다. 

 

1. constructor 안에서 쓰면 부모 class의 constructor

2. prototype 함수 안에서 쓰면 부모 class의 prototype