👍 참고 👍

[개념]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

[예제]
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Classes_in_JavaScript

동일한 기능을 하는 클래스가 많아졌다면 기능을 한데 묶어 공유할 수 있도록 기본 객체를 만들고 상속을 하는게 유용하다!!

---

Class

개념

• 객체를 생성하기 위한 템플릿
  • 데이터와 이를 조작하는 코드를 하나로 추상화 함
• 직관적으로 읽고 작성할 수 있음!
• ES5의 클래스와 다른 문법과 의미를 가짐
• (호이스팅 초기화X)반드시 정의 후 사용
• 프로토타입을 조금 더 쉽게 사용할 수 있도록 문법이 추가된 기능

구조

class 클래스이름 {}

    // 1. 클래스 선언, 이름
    class Stydy {
        // 2. 생성자(초기화)
      constructor(name, level) {
        // 2-1. name, level 메소드를 생성해서 써먹을거임
        this.name = name;
        this.level = level;
      }
    }

// 3. 사용
// 3-1. new 키워드로 인스턴스화
    const haneul = new Stydy("클래스", "모르겠음");
    console.log("name : ", haneul.name);
    console.log("level : ", haneul.level);
    console.log(haneul);

구조 - 클래스 표현식

클래스 네임이 없어도 됨

• 클래스 네임이 있을 경우 body의 local scope에 한해 유효함!

1) unnamed

let name = class {}

let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

2) named

let name = class name{}

let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

구조 - Constructor (생성자)

• class 객체를 생성, 초기화 하는 메서드
• 클래스 안에 한개만 존재할 수 있음!
• super키워드로 부모 클래스의 생성자를 호출할 수 있음

class parent {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class child extends parent {
  speak() {
  // super 키워드로 부모 클래스의 메서드를 호출함
    super.speak();
    console.log(`${this.name} roars.`);
  }
}

let l = new Lion("Fuzzy");
l.speak();
// Fuzzy makes a noise.
// Fuzzy roars.