객체지향 Class 문법

게임 LOL에 등장하는 캐릭터들에 대한 데이터들을 JavaScript로 정리를 하고싶다. JavaScript의 object 형태로 정리해보자.

var 캐릭터1 = {name: '..'}
var 캐릭터2 = {name: '..'}
var 캐릭터3 = {name: '..'}
var 캐릭터4 = {name: '..'}

이렇게 캐릭터가 100개가 필요하다.

 

LOL에 등장하는 캐릭터들은 특징이 여러가지가 있다. 먼저 캐릭터 2개의 특징에 대해 정리해보자.

var nunu = {
 q : 'consume',
 w : 'snowball'
}

var garen = {
 q : 'strike',
 w : 'courage'
}

이렇게 100개의 캐릭터에 대한 특징을 정리하려면... 밤을 새야한다.

이런 작업을 쉽게 할 수 있는 문법이 있다. 바로, class문법

 

class문법을 사용하면 비슷한 object를 많이 만들어낼 수 있다.

즉, class는 object를 뽑아내는 기계일 뿐!

 

1/ 옛날 버전 : function 키워드 사용

예전에는 class문법이 없었기 때문에 function 키워드를 이용하자

function 기계 () { 
//함수 안에 this가 존재하는 이상, 그냥 함수가 아닌 'class'역할을 하는 함수. 즉, object생성기계역할.
//다른 말로, constructor, '생성자함수'라고도 한다.
//this:기계로부터 새로 생성되는 object. 다른말로 '인스턴스'.
 this.q = 'consume'; //새로 생성되는 object(인스턴스)에 q키에는 'consume'을 할당해라. {q: 'consume'}
 this.w = 'snowball'; //새로 생성되는 object(인스턴스)에 w키에는 'snowball'을 할당해라. {w: 'snowball'}
}

 

그리고, 새로운 기계에서 object를 만들고 싶으면, new 기계() 이렇게 적으면 끝!

var nunu = new 기계();
var garen = new 기계();

console창에 nunu를 치면 기계 {q: 'consume', w: 'snowball'} 이렇게 뜬다. (여기서 '기계'는 누가 생성했는지 알려주는것)

 

여기서 문제점!

이렇게 하면 nunu, garen 둘다 똑같은 객체가 생성된다. -> 함수에 parameter를 주면 된다.

parameter를 줌으로써 기계라는 함수를 이용해서 객체를 생성할때 원하는 값을 줄 수 있다.

function 기계 (구멍) {
 this.q = 구멍;
 this.w = 'snowball';
}

var nunu = new 기계('consume');
var garen = new 기계('strike');

//결과
nunu
기계 {q: 'consume', w: 'snowball'}

garen
기계 {q: 'strike', w: 'snowball'}

 

2/ ES6 문법으로 구현 : class 문법 사용

** class명을 작명할때는 보통 영어 대문자로 시작.

class Hero {
 constructor() {
  this.q = 'consume';
  this.w = 'snowball';
 }
}

//parameter를 넣을경우, 이렇게 할 수 있다.
class Here {
 constructor(구멍){
  this.q = 구멍;
  this.w = 'snowball';
 }
}

var nunu = new Here();
nunu
Here {q: 'consume', w: 'snowball'}

 

여기서, class또는 function 함수는 부모, new 기계() 또는 new Here() 이 부분은 자식.

부모-자식 상속을 구현하는 다른 문법도 존재한다 -> prototype

 

 

 

 

**모든 내용은 코딩애플 '객체지향 class문법'이 출처입니다.