클래스

• 객체를 생성하기 위핸 템플릿형식을 클래스라고 한다.
  class 키워드를 사용해서 클래스를 생성하고, 클래스명의 첫 글자는 대문자를 사용해야함.

① 클래스 호출 과정

클래스를 호출 할 때는 new 연산자를 사용하며 new로 클래스 함수를 호출하는 경우에는
클래스 내부에 constructor 라는 생성자 메서드가 생성된다.


constructor 생성자 메서드는 객체의 기본 상태를 설정해준다.
특별한 절차 없이 객체를 초기화 할 수 있습니다.
그리고 this 라는 빈 객체가 생성됩니다.

클래스 하위에 있는 함수들은 모두 그룹으로써 작동합니다.

1.1 클래스 사용

👉 클래스 생성 기본 문법

class Color {
  constructor(r,g,b) {
    // Color 함수를 호출할 때 마다 즉시 실행되는 생성자 메서드
    console.log(r,g,b);
  }
}

const color1 = new Color(2,5,10);

Color 함수를 호출할 때 constructor 메서드를 호출한적이 없지만, 함수를 호출하면
즉시 실행 됩니다.

1.2 this 사용

👉 new 연산자로 인해 생성자메서드 내부에 this 객체가 생성 된다.

class Color {
  constructor(r, g, b, name) {
    this.r = r;
    this.g = g;
    this.b = b;
    this.name = name;
  }

  rgb(){
    const { r, g, b } = this;
    return `rgb(${r}, ${g}, ${b})`;
  }
}

const color1 = new Color(255, 5, 10, 'red');


/* 
동작 원리
1. 클래스 하위에서 작성한 함수들은 모두 그룹으로 묶입니다.
2. Color을 사용하는 모든 인스턴스는 클래스 하위의 모든 메서드에 접근할 수 있게 됩니다.
3. 즉 Color을 사용하는 모든 인스턴스는 rgb() 메서드에 접근할 수 있으며 이 메서드는
   Color.prototype.rgb으로 메서드를 추가한 방식과 동일합니다.

4. rgb() 메서드 하위에는 this(자신을 호출한 객체 Color)을 참조하기에 this.r,g,b 에 접근할 수 있고,
   this를 구조분해해서 rgb 값으로 전달하고 반환하면 사용자가 원하는 rgb 값을 얻을 수 있습니다.
*/

1.3 비슷한 기능의 메서드가 있는 경우

class Color {
  constructor(r, g, b, name) {
    this.r = r;
    this.g = g;
    this.b = b;
    this.name = name;
  }

  /*   
  rgb() {
       const { r, g, b } = this
       return `rgb(${r}, ${g}, ${b})`;
     }
  
     rgba(a = 1.0) {
       const { r, g, b } = this
       return `rgb(${r}, ${g}, ${b}, ${a})`;
     }
     
     위의 rgb, rgba 메서드와 같이 비슷한 로직의 메서드가 존재한다면, 공통의 기능을 가진
     메서드를 추가하고 호출해서 사용할 수 있다.
     */

 innerRGB() {
    const { r, g, b } = this;
    return `${r}, ${g}, ${b}`
  }

  rgb() {
    return `rgb(${this.innerRGB()})`;
  }

  rgba(a = 1.0) {
    return `rgb(${this.innerRGB()}, ${a})`;
  }

}

const color1 = new Color(255, 5, 10, 'red');


/* 
동일한 로직을 수행하는 메서드가 있는 경우, 따로 메서드를 생성하고 클래스 내부의
다른 메서드에서 이 메서드를 호출해서 사용할 수 있습니다.

같은 클래스 내부의 다른 메서드에 접근할때는 this를 이용해서 접근하면 됩니다.
*/

정상적으로 우리가 선언한 클래스의 메서드들이 작동 됩니다.

⛔ 클래스 메서드 사이엔 쉼표가 없습니다.

클래스와 관련된 표기법은 객체 리터럴 표기법과 차이가 있습니다. 쉼표를 넣으면 문법
에러가 발생합니다. 클래스에선 메서드 사이에 쉼표를 넣지 않아도 됩니다.

1.4 클래스 호출 과정

• 클래스는 함수이며 JS에서 새로 만든 다른 구현기능이 아닙니다.

👉 클래스를 호출하면 발생하는 동작 원리

class User {
  constructor(name) { this.name = name; }
  sayHi() { alert(this.name); }
}

alert(typeof User); // function, 클래스 또한 함수 입니다.

/* 
동작 과정
1. User 라는 함수를 생성, 함수의 본문은 생성자 메서드인 constructor에서 가져옵니다.
   생성자가 없다면 본문이 비워진채로 생성됩니다.
   
2. sayHi() 같은 클래스 내부에서 정의한 메서드들은 User.prototype에 저장합니다.
3. new User를 통해서 객체를 만들고 객체의 메서드를 호출하면 객체의 prototype 프로퍼티를 
   통해서 메서드를 갖고옵니다.
*/

User 클래스와 프로토타입을 -그림으로 확인해보면 아래와 같습니다.

클래스 상속

• 클래스를 상속하면 기존 클래스를 다른 클래스에서 상속받아 사용할 수 있습니다.

• 기존에 존재하던 클래스의 내용을 토대로 새로운 기능을 만들 수 있다.

2.1 extends

• 클래스를 확장해주는 키워드

👉 extends 키워드를 사용해서 기존 클래스를 다른 클래스에 상속

class Pet {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  eat() {
    return `${this.name} is eating`
  }
}

class Cat extends Pet {
  meow() {
    return `Meow!!!`;
  }

}

class Dog extends Pet {
  bark() {
    return `bark!!!`;
  }
}

const neo = new Cat('neo',5);
neo.eat();	// neo is eating


/*
동작 원리
1. extends 키워드는 Cat과 Dog 클래스의 prototype을 Pet.prototype으로 설정합니다.
2. 그렇기 떄문에 Cat 함수에는 eat() 메서드가 존재하지 않지만, 프로토타입인 Pet 함수에서 
   eat() 메서드를 검색해서 가져옵니다.
*/

Cat 함수에 메서드가 없다면 프로토타입인 Pet 함수에서 메서드를 찾아서 가져온다.

클래스 내부에 메서드가 존재한다면 프로토타입에서 찾지 않고 클래스 함수 내부에서
메서드를 가져옵니다. Pet 클래스에도 eat() 메서드가 존재하지만, Dog 클래스 내부에
동일한 메서드명이 존재하므로 해당 메서드를 가져온다.

2.2 super

• super 키워드를 사용하면 extends 키워드로 확장시킨 클래스의 생성자를
  참조할 수 있습니다.

👉 super 키워드 사용

class Pet {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  eat() {
    return `${this.name} is eating`
  }
}

class Cat extends Pet {
  constructor(name, age, color = 'red') {
    super(name, age);
    this.color = color;
  }

  meow() {
    return `Meow!!!`;
  }

}

const leo = new Cat('leo', 7);
leo.name; // leo
leo.eat();  // leo is eating


/* 
동작 원리
1. Cat 함수(클래스)를 호출하고 반환값을 leo에 저장
2. Cat 클래스는 Pet 클래스를 상속받아서 Pet 클래스 내부의 메서드에 접근할 수 있다.
3. 확장 클래스로부터 상속받는 클래스 함수는 일반 클래스와는 다르게 this라는 빈 객체를
   만들지 않고 부모(확장)클래스에서 this를 가져옵니다.
4. 부모 클래스에 this를 사용하기 위해서는 super()를 호출해서 부모(확장) 생성자를 실행해줍니다.
5. 이로서 Cat의 생성자 메서드는 부모 생성자를 호출하면서 전달하는 매개변수를 가져와서 사용할 수 있습니다.
6. 결과적으로 leo.name은 부모(확장)클래스의 this 객체에 프로퍼티 name을 가져와서 사용하게 되는 것 입니다.
*/

super()를 사용해서 부모클래스의 this 객체를 가져와 name과 age 프로퍼티에 접근할 수
있습니다.