[ES6] 클래스(class)

클래스

JS에는 정확히 클래스라는 개념 자체가 있지는 않았다. 그러나 그와 비슷한 프로토타입 기반 방식을 구현해서 상속 등을 구현했는데, ES6 에서는 클래스라는 개념이 명시적으로 생겼다.

class Book{

// 속성(프로퍼티)

constructor(title, author, price){

this.title = title;

this.author = author;

this.price = price;

}

// 메서드(프로토타입객체에 쓰던것)

book_info() {

console.log(`${this.title}, ${this.author})`;

}

} // end class

let book = new Book('난중일기', '이순신', '12000');

book.book_info(); // '난중일기, 이순신'

이런 방식을 클래스 표현식이라 한다. constructor 영역에는 프로퍼티(속성)를 그다음 부분에는 메서드를 정의한다. 생성자 함수와 달리 내부에 메서드까지 같이 정의 할 수 있다. 위의 메서드 정의에서도 볼 수 있듯이, 클래스안의 함수들은 function 키워드를 작성하지 않아도 된다. 클래스는 호이스팅이 적용되지 않아, 클래스 선언을 먼저 해야한다.

클래스의 상속

클래스의 상속이란 클래스 원형을 토대로 새로운 클래스를 만들어내는 것이다. 

// 클래스 선언

class Character{

constructor(name, job){

this.name = name;

this.job = job;

}

move(){

document.write(this.name + ' ' + this.job + ' 캐릭터 이동<br>');

}

}

// 자식 클래스 추가

class Monster extends Character{  ------ 1

constructor(name, job, skill){

super(name, job);  ------- 2

this.skill = skill;  ---------- 3

}

useSkill(){ --------------------------- 4

document.write(this.name + ' ' + this.job + ' '+ this.skill + ' 스킬 사용<br>');

}

}

//인스턴스 객체 생성

let char 1 = new Character('산체스', '기사');

let monster = new Monster('엘리펀트', '제사장', '도끼');

//메서드 실행

char1.move();  // 산체스 기사 캐릭터 이동

monster.useSkill();  // 엘리펀트 제사장 도끼 스킬 사용

monster.move();  // 엘리펀트 제사장 캐릭터 이동

1. Character의 자식 클래스 Monster를 추가한다. extends로 부모(상위)클래스를 지정할 수 있다. 인스턴스는 원형에서 복사되어 그대로 재사용하는 것이지만, 클래스는 부모(super)에게서 원형을 상속받아, 변형된 클래스를 만들어낸다.  

2. super()은 부모의 생성자(constructor)를 호출해 자식클래스 Monster에 상속 시킨다. 

3. 새속성을 추가하여 변형된 클래스를 만든다.

4. 새로운 메서드인 스킬사용 메서드를 만든다.

정리 

생성자함수(ES5)	클래스(ES6)
인스턴스 : 생성자함수와 동일한 형태로 복사되어 만들어진 객체	클래스상속 : 부모에게서 원형을 상속받아 변형된 또다른 클래스
속성(프로퍼티)은 생성자 함수에, 메서드는 해당 함수의 프로토타입에 정의	속성, 메서드 모두 클래스 내부에 정의
인스턴스객체는 개별적인 영역을 가지지만, 메서드가 정의된 생성자함수의 프로토타입 공간은 생성자함수로 생성된 인스턴스들이 참조형태로 공유한다.