OOP 객체 지향 언어의 4가지 개념 중 상속과 다형성을 코드로 표현하고 싶다면

상위 클래스를 하위 클래스로 확장하여

기존에 존재하던 기능과 속성을 기준으로 새로운 기능, 속성 추가 및 변경을 할 수 있다.

위 개념을 코드로 구현하기 위해 extends, super 메서드의 개념 및 사용법을 알아보자.

extends

상위 클래스

class NBA_player {
  constructor(name, height) {
    this.height = height + "cm";
    this.name = name;
    this.speed = 0
  }
  shot() {
    console.log(`${this.name}은 슛을 쏘았다.`);
  }
  dunk(speed) {
    this.speed = speed;
    console.log(`${this.name}은 ${this.speed} 속도로 덩크를 내리꽂는다.`);
  }
}

하위 클래스

class Jodan extends NBA_player {
  block() {
    console.log(`${this.name}이 상대편 선수 슛 찬스에 블락을 성공하였다.`);
  }
}

let jodan = new Jodan("michael jodan", 205);

jodan.height; // 205cm
jodan.block(); // michael jodan이 상대편 선수 슛 찬스에 블락을 성공하였다.
jodan.shot(); // michael jodan은 슛을 쏘았다.
jodan.dunk(100) // michael jodan은 100 속도로 덩크를 내리꽂는다.

NBA_player는 농구 선수들이 갖고 있는 기본적 기능을 소유하고 있다.

만일 농구 선수들 중 마이클 조던을 선택하여 기본적인 기능은 물론이고 마이클 조던만의 기능을

추가하기 위해 클래스 확장 문법 extend를 활용하여 class Jodan extends NBA_player로 확장한다.

하위클래스 Jodan은 인스턴스 객체 jodan 를 생성하여 name, heigth를 부여하였다.

1. 인스턴스 객체 jodan에 dunk() 기능을 탐색하였는데 찾지 못하였다.
2. jodan의 프로토타입인 클래스 Jodan.prototype에 dunk() 메서드가 있는지 찾아본다.
   그러나 block() 메서드만 있고 여전히 못찾았다.
3. extends 를 통해 상위클래스인 NBA_player에 메서드가 있는지 찾아본 결과 메서드 dunk() 를 찾아냈다.

여기서 extend는 프로토타입을 기반으로 동작하는데, Jodan.prototype.[[Prototype]]은 상위클래스NBA_player에 설정한다.

그러므로 Jodan.prototype에서 메서드 기능을 찾지 못할 경우 상위클래스인 NBA_player로 이동하여 메서드를 탐색한다.

모든 기능을 종합하면

기본 기능: jodan.height, jodan.shot, jodan.name, jodan.dunk

고유 기능: jodan.block

super

class NBA_player {
  constructor(name, height) {
    this.height = height + "cm";
    this.name = name;
    this.speed = 0
  }
  
  shot() {
    console.log(`${this.name}은 슛을 쏘았다.`);
  }
  dunk(speed) {
    this.speed = speed;
    console.log(`${this.name}은 ${this.speed} 속도로 덩크를 내리꽂는다.`);
  }
}

class Jodan extends NBA_player {
  block() {
    console.log(`${this.name}이 상대편 선수 슛 찬스에 블락을 성공하였다.`);
  }
}

let jodan = new Jodan("michael jodan", 205, 23);

jodan.height; // 205cm
jodan.block(); // michael jodan이 상대편 선수 슛 찬스에 블락을 성공하였다.
jodan.shot(); // michael jodan은 슛을 쏘았다.
jodan.dunk(100) // michael jodan은 100 속도로 덩크를 내리꽂는다.

만일 위의 코드에서 인스턴스 객체 jodan에 전달인자 23을 속성 추가하고 싶지만,

부모 클래스에서의 속성 constructor()에는 두개의 전달인자 밖에 받지 못하는 상황일 때

해결해주는 키워드가 바로 super() 이다.

기능 메서드 또한 추가를 할수 있는데 속성과 달리 super.부모메서드기능() 으로 작성하여 사용해야 한다.

class NBA_player {
  constructor(name, height) {
    this.height = height + "cm";
    this.name = name;
    this.speed = 0
  }
  
  numberChange() {
	return 25
  }
  
  shot() {
    console.log(`${this.name}은 슛을 쏘았다.`);
  }
  dunk(speed) {
    this.speed = speed;
    console.log(`${this.name}은 ${this.speed} 속도로 덩크를 내리꽂는다.`);
  }
}



class Jodan extends NBA_player {
    constructor(name, height, player_number){
        super(name, height);
        this.player_number = player_number;
    }
  
   numberChange() {
	return super.numberChange()+this.player_number
  }
  
  block() {
    console.log(`${this.name}이 상대편 선수 슛 찬스에 블락을 성공하였다.`);
  }
}

let jodan = new Jodan("michael jodan", 205, 23);

jodan.plaer_number // 23
jodan.numberChange() // 48

1. 부모클래스를 당겨 오기 위해 super(name, height) 통해 부모클래스 속성을 가진채 새로운 속성 player_number을 추가한다.
2. numberChange() 메서드 또한 변경하기 위해 super.numberChange()+this.player_number 를 작성하여 메서드 결과가 바뀐 상태로 출력된다.

부모클래스의 속성을 상속하고 새로운 속성을 추가하고 싶다면 super()

부모클래스의 메서드 기능을 변경하고 싶다면 super.Methord()