[ES6] Class

ECMAScript 2015의 Class

ES6는 변수에 대한 규칙이 엄격해지고 클래스와 모듈 같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가되었다. 특히 명시적인 클래스의 추가로 더욱 더 편리해졌다.

기본의 자바스크립트(ES5)에는 클래스가 없어서, 생성자 함수와 프로토타입으로 클래스의 개념을 구현했지만, ES6에서는 클래스를 선언할 수 있다. ES5와 ES6의 코드를 비교해보자.

ES5

//생성자 함수
function Character(name, job) {
  this.name = name;
  this.job = job;
}
 
//프로토타입으로 메소드 생성
Character.prototype.move = function() {
  document.write(this.name + ' ' + this.job + ' 캐릭터 이동<br>');
}
 
//인스턴스 객체 생성
var char1 = new Character('루이스', '기사');
 
//메소드 실행
char1.move();

ES6

//클래스 선언
class Character{
  constructor(name, job) {
    this.name = name;
    this.job = job;
  }
  move() {
    document.write(`${this.name} ${this.job} 캐릭터 이동<br>`);
  }
}
 
//인스턴스 객체 생성
let char1 = new Character('루이스', '기사');
 
//메소드 실행
char1.move();

- (줄 2) : 생성자 함수로 정의하던 형태로 constructor에 속성을 정의한다.

- (줄 7) : 메소드를 지정한다. 클래스 내의 함수들은 function 키워드를 따로 선언하지 않아도 된다. 기존 방식에서는 prototype으로 함수들을 별도로 선언해서 연결하는 방식이어서 구성이 복잡하였지만, ES6에서는 문법이 간결해졌다.

Class의 상속

클래스의 상속이란, 클래스 원형을 토대로 새로운 클래스를 재창조하는 것이다. ES6의 클래스를 사용하면 기존 자바스크립트로 클래스의 상속 개념을 구현하는 것보다 작업이 훨씬 간단해진다.

예제

'use strict'; //문법을 엄격하게 적용함
 
// 클래스 선언
class Character {
  constructor(name, job) {
    this.name = name;
    this.job = job;
  }
  move() {
    document.write(`${this.name} ${this.job} 캐릭터 이동<br>`);
  }
}
 
//자식 클래스
class Monster extends Character {
  constructor(name, job, skill) {
    super(name, job);
    this.skill = skill;
  }
  useSkill() {
    document.write(`${this.name} ${this.job} ${this.skill} 스킬 사용<br>`);
  }
}
 
//인스턴스 객체 생성
let char1 = new Character('루이스', '기사');
let monster = new Monster('오크', '대장', '몽둥이');
 
//메소드 실행
char1.move(); //루이스 기사 캐릭터 이동
monster.useSkill(); //오크 대장 몽둥이 스킬 사용
monster.move(); //오크 대장 캐릭터 이동

- (줄 17) : super()는 상속받은 부모의 생성자(constructor)를 호출해 자식 클래스인 Monster에 적용한다.