클래스와 인스턴스?
클래스와 인스턴스는 부모와 자식같은 관계에있다.
우리가 메이플스토리나 여러 RPG게임을 하다보면 직업이라는게있다.
이러한 직업이 결정되면 각 개인별로의 차이는있어도 스킬트리,무기등 공통적인 사항들이생기게된다.이러한 직업 class명을 클래스 그밑에 유저들을 인스턴스라고 이해하면 편할것같다.
그렇다면 class에서 선언하거나 선언된 여러 요소들이 고스란히 인스턴스 포맷에 적용된다는뜻인데 class를 정의하는것이 인스턴스를 만들어내는것과 굉장히 연관이있게된다. 그렇다면 calss를 어떤식으로 정의내리고 만들어야할까?
클래스를만드는법
클래스를 정의하는방법은 크게 두가지가있다.
ES5문법 ES6문법 어렵게 생각할필요없이 ES5가 옛날 ES6가 최신이라고보면된다. 그렇다면 구식과 최신의 차이가뭘까? 간단하게 정리하면 최신으로갈수록 간편하고 보기편하다.
예를하나들어보자 메이플직업에서 전사라는 직업을생각해보자.전사로서 유저가 플레이할떄 구별될수잇는 공통요소가 무엇일까?
- 캐릭터닉네임
- 사용무기
- 캐릭터디자인
간단하게 3가지정도로 압축했다.이를 간단하게 나타낸다면
전사
-캐릭터닉네임
-사용무기
-캐릭터 디자인
으로 전사아래 하위카테고리 3가지가있게된다.
이를 자바스크립트를 통해 구현하면되는데 구현하는방식이 바로 ES5, ES6이다.
ES5를 통한 구현을 예시로들어보겠다.
function warrior(name,weapon,design){}
ES6를 통한 구현을 예시로들어보겠다.
class warrior{
constructor(name,weapon,design){}
}
자 위 표현식을보고 공통적으로 궁금한점하나, 차이점으로 궁금한점 하나가발생했다.
ES6를 구현했을때는 constructor라는 새로운 요소가 추가됬으며 뒤에 {}안에는 무엇이들어가는것이냐.
먼저 constructor는 생성자함수로 인스턴스에 모두적용되는 실행코드를뜻한다.
간단히 이해하자면 모든전사는 캐릭터이름,무기,캐릭터디자인이라는요소가 포함된다. 이런 모두 포함되는 필수요소를 constructor라는 생성자함수에 넣어준다고 이해하자.
{}칸에는 주로 매서드가입력되는데 매서드란 간단히말하면 실행동작이라고생각하면된다.
우리가 rpg전사를 플레이할떄 할수잇는 동작이무엇이있을까? 사냥,귀환,아이템구매 등등 이런 행동요소들을 입력해주는 칸이라고생각하면된다.
그렇다면 이런 매서드를 class에서 입력할떄도 ES5를통한구현 ES6를통한구현 두가지방법으로 나눠진다.
ES5를 통한 구현을 예시로들어보겠다.
function Warrior(name,weaopn,design){}
Warrior.prototype.fight =function(){싸우는코드}
Warrior.prototype.shopping =function(){상점에서구매하는코드}
}
ES6를 통한 구현을 예시로들어보겠다.
class Warrior{
constructor(name,weapon,design){}
fight(){
}
shopping(){
}
}
단순비교만해봐도 ES6로 작성한것이 훨씬 간편하고 보기좋다.
왜냐하면 class내부에 속성과 매서드가 모두포함이되있고, ES5는 매서드를 정의하기위해서 prototype이라는것을 이용해야만한다.
자 이제 어느정도 class가 무엇이고 어떻게 정의를 내리는지를 알아보았다면
자식요소인 인스턴스에대해 알아보도록하자.
인스턴스?
새로운 인스턴스를 만들어내는데 사용되는 키워드가바로 "NEW"이다. NEW키워드를 통해 새로운 인스턴스를 정의하고 만들어낼수있는데 여기서 인스턴스별로 설정해줘야하는요소는 속성에나와있는 값들이다. 앞에 예시를들면 name ,weapon ,design 등이그렇게되겠다.
예시를하나들어보자
let Spearman = new Warrior('코드스테이츠','창','남자캐릭터')
라고 정의내렸을때
Spearman.weapon;//창
Spearman.fight//캐릭터가싸운다.
라는결과값으로 이어질수있다.
This?
마지막으로 하나 깜빡하고 넘어갈뻔햇는데 this 라는것에대해 설명해보겠다.
간단하게 정리하자면 함수가실행될떄 해당 scope마다 생성되는 고유한 실행 context로
만약 인스턴스생성시 해당 인스턴스가 바로 this의값이된다.
warrior의경우 name,weapon,design 등앞에 this 가붙게된다.
