<그냥하자> JavaScript (14) 클래스

출처 : 인프런 얄팍한 코딩사전

클래스

Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. JavaScript에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다.Class를 정의하는 한 가지 방법은 class 선언을 이용하는 것입니다.

class를 선언하기 위해서는 클래스의 이름(여기서 "Rectangle")과 함께 class 키워드를 사용해야 합니다.

MDN 문서

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

constructor 메서드

인스턴스 생성시 인자를 받아 프로퍼티를 초기화함
클래스에 하나만 있을 수 있음 - 초과시 오류 발생
다른 메서드 이름을 쓸 수 없음
기본값 사용 가능
필요없을 (인자가 없을 때 등) 시 생략 가능

정적 static 필드와 메서드

인스턴스의 수와 관계없이 메모리 한 곳만 차지
인스턴스 없이 클래스 차원에서 호출
정적 메서드에서는 정적 필드만 사용 가능

---

+++ 09.01 추가

출처 : 코딩 자율학습 제로초의 자바스크립트 입문

클래스

자바스크립트는 생성자 함수를 조금 더 편하게 쓸 수 있도록 클래스 문법을 도입했다.

기본 구조는 아래와 같다.

class <클래스 이름> {
  constructor(매개변수1, 매개변수2, ...) {
    //생성자 함수 내용
  }
}

eg

class Monster { 
	constructor(name, hp, att) { 
		this.name = name; 
		this.hp = hp;
		this.att = att; 
}
attack(monster) { 
	monster.hp -= this.att; 
	} 
}

클래스 문법의 장점은 객체의 속성과 메서드를 하나로 묶을수 있다는 것.

클래스에 new를 붙여 호출하면 constructor()메서드가 실행되고 객체가 반환된다. 이 때 this는 생성된 객체 자신을 가리키게 된다.

const monster1 = new Monster('슬라임', 25, 10);
const monster2 = new Monster('슬라임', 26, 9);

클래스 상속하기

클래스는 상속하기가 쉽다. 클래스가 등장한 flow(?)가 공장 함수 => 생성자 함수 => 클래스 함수 인거 같은데,,,

class <자식 클래스> extends <부모 클래스> { 
	constructor(매개변수1, 매개변수2, ...) { 
		super(인수1, 인수2 ...); // 부모 클래스의 생성자 호출
		this.매개변수 = 값; // 자식 클래스만의 속성 
 } 
 메서드() { // 부모 클래스의 메서드만 호출하면 생략 가능 
 	super.메서드(); // 부모 클래스의 메서드 호출
    // 부모 클래스 메서드 호출 이후의동작
 } 
 메서드(매개변수1, 매개변수2, ...) { 
	// 자식 클래스만의 동작
    }
 }