자바스크립트 클래스 (javascript class) 상속

자바스크립트 클래스 (javascript class) 상속

대부분의 프로그래밍 언어에는 클래스라던가 상속의 개념이 있다고 합니다. 클래스나 상속을 하는 이유는 여러가지가 있겠지만, 제생각엔 결국 귀찮은것을 줄이고 편리하게 일하기 위해서 하는것이라 생각합니다. 예를 들어 요즘 유행하는 게임인 리그오브레전드(이하 롤 이라고 부르겠습니다)에는 우리가 골라서 할수있는 케릭터가 150개 가까이됩니다. 롤에서는 우리가 골라서 게임할수 있는 아바타인 캐릭터를 챔피언이라고 부르는데요. 이름순으로 정렬해보자면 가렌, 갈리오, 갱플랭크, 그라가스, 그레이브 ..,...,.., 하이머딩거,헤카림 이렇게 아마 세보진 않았지만 150개가까이 될것입니다. 게다가 이 챔피언을 2~3개월에 1번씩 찍어내고 있죠. 우리가 이 챔피언을 2~3개월 마다 1번씩 만들어내는 게임개발자라던가, 이 챔피언들의 능력치와 특성과 정보를 제공하는 팬사이트라고 해보겠습니다. 챔피언정보기록하거나 새로 개발해야하는데 아무것도 없이 이 행위를 한다면 맨땅에서부터 하나하나 작성을 하겠죠. 그러나 이 챔피언들은 공통된 속성이나 특성 들이 존재합니다. 그래서 이 공통된 특성을 이용하여, 일종의 템플릿을 작성해 놓는다면 편하게 반복되는 작업을 쉽게 해결 할 수 있겠죠.

 

상속없이 챔피언 정보를 객체안에 정리하는 작업의 예:

let 가렌={

패시브스킬:인내심,

q스킬:결정타,

w스킬:용기,

e스킬:심판, 

r스킬:데마시아의 정의,

체력:620,

레벨당성장체력:84,

.,.,.,.,....}

 

let 갈리오={

패시브스킬:석상의 강타,

q스킬:전장의 돌풍,

w스킬:듀란드의 방패,

e스킬:정의의 주먹, 

r스킬:영웅출현,

체력:562,

레벨당성장체력:112,

.,.,.,.,....}

 

let 갈리오={

패시브스킬:불의 심판,

q스킬:혀어어어업상,

w스킬:괴혈병 치료

e스킬:화약통, 

r스킬:포탄세례,

체력:540,

레벨당성장체력:82,

.,.,.,.,....}

 

4번째 챔피언

5번째 챔피언

.......

149번째 챔피언 

150번째 챔피언 

 

이순서로 작업을 해야겠습니다. 그래서 너무 번거롭고 비효율적이기 때문에 위의 객체를 생성하는 일을 일종의 틀을 만들어서 작업하기로 한것이 바로 상속입니다. 

 

위에 노가다에서 보면 아시겠지만 챔피언들은 공통된 특성이 있습니다. q스킬,w스킬,e스킬,r스킬,패시브스킬,체력,성장체력 을 모두 공통적으로 가지고 있습니다.

 

공통분모만 가지고 템플릿을 만드는것= 상속입니다.

 

그리고 이 상속이라는 것을 구현하려면 방법이 필요하겠죠? 바로 그 방법이 자바스크립트에서 class문법이라는것으로 구현합니다. 클래스가 무엇이고 상속이 무엇인지 잘 아셨나요?

 

그래서 클래스 문법을 가지고 실제 코딩을 해보겠습니다. 하지만 이 클래스문법에도 es5방식과 es6방식 2가지가 있습니다. 구버전과 신버전이 있는 셈이죠. 둘다 구현해보겠습니다. 먼저 es5버전

function Champion(passive,q,w,e,r,hp,hpgrow){
	this.passive=passive
    this.q=q
    this.w=w
    this.e=e
    this.r=r
    this.hp=hp
    this.hpgrow=hpgrow
}

es6버전

class Champion{
	constructor(passive,q,w,e,r,hp,hpgrow){
      this.passive=passive
      this.q=q
      this.w=w
      this.e=e
      this.r=r
      this.hp=hp
      this.hpgrow=hpgrow
    }
}

거의 비슷합니다. 어떤것을 쓰셔도 상관없으나, class를 쓰고있다는 것을 쉽게 알아볼수 있게 해주는 가독성이 좋은 es6을 사용하는게 좋아보입니다. es5버전의 경우 일반 함수나 다를바가 없어 보이기 때문에 딱봤을때 상속을 하려는것인지 함수를 쓰려는 것인지 눈에 잘 들어 오지 않습니다.

 

아무튼 그래서 이렇게 Champion이라는 클래스를 만들어놓고 그라가스라는 챔피언을 만들고 싶으면 이렇게 하면됩니다. 

 

let 그라가스 = new Champion('서비스 시간','술통굴리기','취중분노','몸통 박치기','술통 폭발',600,95)

1줄컷이 가능합니다.

 

그라가스를 찍어보면 아래와 같은 그라가스 객체가 생성되었답니다. 

 추가해야할 속성이 새로 생긴다면, Champion클래스에 추가해주면 됩니다. 예를 들면 hp뿐만아니라 mp나 방어력, 이동속도 , 공격속도 등등 필요한 속성이 생겼다면 Champion에 추가하면되기 때문에 추후 관리가 매우 수월해집니다. 이러한 이유와 장점때문에 상속을 사용하고, 상속을 구현하기 위해 class문법을 사용하는 것이라고 생각됩니다.