[JavaScript/ES6] class 로 상속 기능 구현하기 / extends, super

📌 class 문법 사용 하는 방법

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

var 자식 = new 부모();

 

📌 상속 가능한 함수를 추가하려면?

sayHi 라는 함수를 상속가능한 함수를 추가하려면, class를 배우기 이전에는

1. constructor 안에 this.sayHi 형식으로 추가하기

2. prototype 에 추가하기

두 가지 방법이 있었다.

 

class 를 활용하면,

1번은 아래와 같이 쓴다. (constructor 안에 정의!)

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

var 자식 = new 부모();

 

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

 

2번과 같이 prototype 에 추가하는 방식처럼 활용하려면,

constructor 바깥에 정의를 한다.

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

var 자식 = new 부모();

 

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

 

또는,

부모.prototype.sayHi = function() {} 형식으로 해도 동일하다

 

📌 Object.getPrototypeOf()

부모 prototype 을 출력해준다.

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

(__proto__ 와 비슷한 역할)

 

📌 constructor 안에 파라미터 추가하려면?

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

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

 

📌 extends : class 를 상속한 class 를 만들고 싶을 때 사용

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

 

할아버지와 유사한 class 를 만들고 싶다면 extends 문법을 사용하자

extends 문법  = 다른 class를 상속해서 만들 수 있게 도와주는 문법

 

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

class 아버지 extends 할아버지{
  constructor(){
    super(); // 안쓰면 에러남
    this.나이 = 50;
  }
}

 

super()

=> extends로 상속중인 부모 class의 constructor() 를 의미

= 할아버지 class 의 constructor() 과 동일하다는 의미

 

아버지가 할아버지 클래스를 상속받을 때, 이름 속성을 이용하고 싶다면 name 파라미터를 넘겨야 한다.

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

class 아버지 extends 할아버지{
  // name 파라미터 넘기기
  constructor(name){
    super(name);
    this.나이 = 50;
  }
}

 

constructor , super 에 name 을 넘겨주면 된다.

 

아버지1 에는 나이가 추가되었음을 확인

 

 

할아버지 class 에 sayHi 라는 함수를 추가해보자.

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
  sayHi(){
    console.log('안녕하세요. 할아버지입니다.')
  }
}

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

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

 

아버지1.sayHi(); 를 실행시키면,

아버지1 자체에 sayHi 가 있는 지 확인하고 없다면

아버지 class 에 sayHi 가 있는 지 확인한다. 여기에도 없으니,

할아버지 class 에서 탐색을 하는데 할아버지에는 sayHi 가 있으니 해당 함수를 출력한다.

 

📌 class 간에 함수를 상속하고 싶다면? super 사용

super.부모class함수명();

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
  sayHi(){
    console.log('안녕하세요. 할아버지 입니다.')
  }
}

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50;
  }
  sayHello(){
    console.log('안녕하세요. 아버지 입니다.');
    super.sayHi(); // 할아버지 class 의 sayHi 실행
  }
}

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

 

 

 

 

참고 강의:

https://codingapple.com/?gad_source=1&gclid=CjwKCAjw8rW2BhAgEiwAoRO5rAKLfZrxxAhflw20e9N8tgG0jQNx7gdiVTok5rqrqJvaoQv012Yi1RoCR78QAvD_BwE

코딩애플 온라인 강좌 - 개발자도 단기완성!