[JS & ES6 신문법 학습] 객체지향5. class를 복사하는 extends / super

extends와 super에 대해서 배워보자.

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

var 할아버지1 = new 할아버지('만덕')

우선 이렇게 할아버지 오브젝트를 생성가능함.

이거랑 유사한 class를 만들고 싶음
할아버지의 속성들 그대로 물려받을거임.

extends를 이용하면 됨

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

var 할아버지1 = new 할아버지('만덕')

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

var 아버지1 = new 아버지()

나이도 넣어주자. 이렇게 하면 땋

에러가 발생한다. extend해서 만든 class는 this를 함부로 그냥은 못써요.
this를 써서 새로운 것을 사용하고싶으면 super()를 사용함.

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

var 할아버지1 = new 할아버지('만덕')

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

var 아버지1 = new 아버지()

요롷게 사용하는거지 이건

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

var 할아버지1 = new 할아버지('만덕')

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

var 아버지1 = new 아버지()

이것과 동일하다. 부모의 constructor를 그대로 가져오는 것이 super()라고 보면 된다.

super() 물려받는 class의 constructor라는 뜻.

name도 사용하고 싶으면 아래처럼 하면 된다.

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

var 할아버지1 = new 할아버지('만덕')

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

var 아버지1 = new 아버지('지버아')

이때, name 파라미터가 없거나 입력을 안하면 undefined가 나온다.

파라미터가 2개면 2개를 작성해주면 됨

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

var 할아버지1 = new 할아버지('만덕')

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

var 아버지1 = new 아버지('지버아')

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

var 할아버지1 = new 할아버지('만덕')

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

var 아버지1 = new 아버지('지버아')

이렇게 있을 때, 아버지1도 sayHello()를 사용가능한가?!

된다.

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

var 할아버지1 = new 할아버지('만덕')

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

var 아버지1 = new 아버지('지버아')

이렇게 하면, 아버지1.sayHi()는 아버지 클래스의 sayHi()가 출력되는 것을 볼 수 있다.

만약 또 아래처럼하면?!

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

var 할아버지1 = new 할아버지('만덕')

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

super(name)은 부모 class의 constructor를 의미
super.sayHi의 super는 부모 class의 prototype을 의미 ( __proto__)

이렇게 출력된다.