클래스는 객체지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

🎇 클래스

🔗 기본 문법

class MyClass {
  method1() { }
  method2() { }
  mothod3() { }
}

이렇게 클래스를 생성한 후, new MyClass() 를 호출하면 내부에서 정의한 메서드가 들어 있는 객체가 생성된다.

객체의 기본 상태를 설정해주는 생성자 메서드 constructor() 는 new 에 의해 자동 호출된다. 그래서 특별한 절차 없이 객체를 초기화 할 수 있다.

class User {
  constructor(name) {
    this.name = name;
  }
  
  sayHi() {
    alert(this.name + "님, 안녕하세요!");
  } 
  
} 

let user = new User("bo");
user.sayHi(); // bo님, 안녕하세요!

🔗 JS에서의 클래스?

JS에서 클래스는 함수의 한 종류이다.

class User {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    alert(this.name + "님, 안녕하세요!");
  } 
} 

alert(typeOf User); //function

Class User { } 문법 구조가 하는 일은 다음과 같다.

1. User 라는 함수를 만든다. 함수 본문은 생성자 메서드 constructor 에서 가져온다. 생성자 메서드가 없으면 본문이 비워진 채로 함수가 만들어진다.

2. sayHi 같은 클래스 내에서 정의한 메서드를 user.prototype 에 저장한다.

new User 을 호출하여 객체를 만들고, 객체의 메서드를 호출하면 메서드를 prototype 프로퍼티를 통해 가져온다.

---

🎇 클래스 상속

클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있다.
기존에 존재하던 기능을 토대로 새로운 기능을 만들 수 있다.

class Animal {
  constructor(name) {
    this.name = name;
    this.speed = 0;
  }
  
  run(speed) {
    this.speed = speed;
    alert(`${this.name} 은/는 속도 ${this.speed}로 달립니다.`);
  } 
  
   stop() {
    this.speed = 0;
    alert(`${this.name} 이/가 멈췄습니다.`);
  }
}

let animalObject = new Animal("동물");

🔗 extends 키워드

위와 같은 것에서 또 다른 클래스 Rabbit 을 만들어 보자.
토끼 또한 동물이므로 동물 관련 메서드가 담긴 Animal 클래스를 확장해서 만들면 토끼 또한 동물이 할 수 있는 일반적인 동작을 수행할 수 있다.

클래스 확장 문법은 아래와 같다.

class Child extends Parent
// Parent를 상속받는 Child

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} 이/가 숨었습니다!`);
  }
}

let rabbitObject = new Rabbit("흰 토끼");

rabbit.run(5);  // 흰 토끼 은/는 속도 5로 달립니다.
rabbit.hide();  // 흰 토끼 이/가 숨었습니다!

이렇게 만든 객체는 Rabbit 에 정의한 메서드에도 접근할 수 있고,
Animal 에 정의한 메서드에도 접근할 수 있다.

---

🔗 메소드 오버라이딩

위의 예시에 이어서, Rabbit 에서 stop() 등의 메서드를 자체적으로 정의하면,
상속받은 Animal 의 stop() 메소드가 아닌 자체 메소드를 사용한다.

▪ super 키워드

부모 메서드 전체를 교체하지 않고 이것을 토대로 일부 기능만 변경하고 싶을 때, 
부모 메서드의 기능을 확장하고 싶을 때,
이미 만든 커스텀 메서드의 과정 전, 후에 부모 메서드를 호출하고 싶을 때, 

위와 같은 경우에 super 키워드를 사용한다.

▪ super.method() : 부모 클래스에 정의된 method 호출
▪ super() : 부모 생성자 호출, 자식 생성자 내부에서만 사용 가능

class Animal {
	...
  stop() {
    this.speed = 0;
    alert(`${this.name}가 멈췄습니다.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name}가 숨었다!`);
  }

  stop() {
    super.stop(); // 부모 클래스의 stop을 호출해 멈추고,
    this.hide(); // 숨습니다.
  }
}

위와 같이 Animal 을 상속받은 Rabbit 은 실행 중간에 부모 클래스에 정의된 메서드 stop 을 가질 수 있게 되었다.

Modern Javascript Tutorial