Class

객체를 생성하기 위한 템플릿으로 특별한 함수이다. Class는 Class 표현식과 Class 선언 두 가지 방법으로 정의할 수 있다.

Class 표현식

익명 클래스 혹은 이름을 가진 클래스 표현식으로 클래스를 정의할 수 있다.

// 익명 클래스
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);  // return Rectangle


// 이름을 가진 클래스
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);  // return Rectangle2

• 주의할 점은 클래스 표현식 및 선언에 hoisting이 일어나지 않기 때문에, 꼭 클래스를 정의한 후 사용할 수 있다는 점이다.

Class 선언

아래와 같이 class 키워드와 클래스 이름을 사용하여 선언이 가능하다.

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

const r = new Rectangle();

Class methods

Constructor (생성자)

constructor 메서드는 class로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드이다. 해당 메서드는 클래스 안에 한 개만 존재할 수 있다.

constructor는 부모 클래스의 constructor를 호출하기 위해 super 키워드를 사용한다.

클래스 상속

클래스 상속은 기존에 존재하던 클래스를 다른 클래스로 확장하면서, 새로운 기능도 만들 수 있도록 한다.

extends 키워드

extends 키워드를 통해 다른 클래스의 자식 클래스를 생성할 수 있다.

// 클래스 선언
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} barks.`);
  }
}

// extends 키워드 통해 자식 클래스 생성
class Dog extends Animal {
  constructor(name) {
    super(name); // super class 생성자를 호출하여 name 매개변수 전달
  }
}
let d1 = new Dog('Mitzie');
d1.speak(); // Mitzie barks.

// 자식 클래스 생성 + 기존 기능 변경 + 새 기능 추가
class Cat extends Animal {
  constructor(name) {
    super(name);
    this.created = Date.now();

  }
  speak() {
    console.log(`${this.name} meows.`);
  }
}
let c1 = Cat('양갱');
c1.speak(); // 양갱 meows.

Instance

인스턴스는 실체이다.

예를 들어, 사과가 클래스라면 "내가 오늘 깎아서 가족들과 먹은 그 사과"는 인스턴스다.

조금 더 구체적으로 인스턴스는 클래스를 담은 일종의 클래스 변수이며, 객체의 하위 개념이다.