ES6의 클래스

자바스크립트 프로젝트 북을 보며 공부한 내용입니다.

https://book.naver.com/bookdb/book_detail.nhn?bid=12285042

자바스크립트 프로젝트북

ECMAScript 6 Class

기존의 자바스크립트에 없던 클래스가 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의 클래스로 하면 아래와 같다.

 

// 클래스 선언(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();

클래스의 상속

클래스의 상속이란 클래스 원형을 토대로 새로운 클래스를 재창조하는 것입니다.

 

"use strict"; // 문법을 엄격하게 적용함을 선언하는 키워드

// 클래스 선언(ES6)
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();

 

Character의 자식클래스(extends 로 상위 클래스 지정)를 추가합니다.

생성자 메소드에서 super 키워드를 통해 상위 클래스의 생성자 메소드를 호출 할 수 있습니다.
생성자 메소드에서 this를 사용하기 위해서 super 메소드를 먼저 호출해야 합니다.