Js class

조원태·2022년 7월 22일
0

Class

요즘 게임정보제공 사이트가 많이 생겨 나고 있습니다
그렇다면 게임 캐릭터들의 정보를 자바스크립트로 쭉 작성해야 할 것입니다
그래야 나중에 게임 캐릭터들이 업데이트 되거나 html로 화면에 보여줄때 편리할 것이기
때문입니다 그렇다면 100개가 넘어가는 게임 캐릭터가 있을때 어떻게 작성해야 할까요?

let 용사 = {
	q: "강하게 베기"
    W: "엄청 강하게 베기"
    E: "무척 아프게 베기"
    R: "굉장히 아프게 베기"
}

let 마법사 = {
	q: "불 마법"
    w: "물 마법"
    E: "바람 마법"
    R: "번개 마법"
}
....

자료형으로 정리해야 나중에 수정하기에 편리할 것 같습니다
하지만 100가 넘어가는 오브젝트를 만들려면 시간이 굉장히 오래 걸릴것 같습니다
이러한 작업들을 쉽게할 수 있는 문법이 있습니다 그것이 바로 class 입니다
class 는 간단하게 오브젝트를 만들기 쉽게하는 공장입니다

function 공장(){
	this.q: "강하게 베기"  
    this.W: "엄청 강하게 베기"
    this.E: "무척 아프게 베기"
    this.R: "굉장히 아프게 베기"
}

함수로 캐릭터 정보를 만들어내는 공장을 만들었습니다 그런데 객체 키 앞에
this 라는것이 생겼습니다 this는 공장으로 부터 생성되는 오브젝트 입니다
이걸 인스턴스(instance) 라고 부릅니다 위 코드를 설명하면 공장으로부터
생성되는 오브젝트에 해당 value를 추가하라 라는 뜻이 됩니다

let 궁수 = new 공장()

이렇게 비슷한 오브젝트를 만들고 싶으면 공장함수에 new 키워드를 사용하여 새롭게
오브젝트를 만들수 있습니다 5줄이나되는 코드를 1줄로 요약할수 있습니다

let 도적 = new 공장()

   { q: "강하게 베기"  
    W: "엄청 강하게 베기"
    E: "무척 아프게 베기"
    R: "굉장히 아프게 베기"}


하지만 여기서 문제점이 보입니다 다른 스킬을 할당해주고 싶지만 console.log 해보면
전부 똑같은 스킬을 가지고있습니다
function 공장(스킬q){
	this.q: 스킬q  
    this.W: "엄청 강하게 베기"
    this.E: "무척 아프게 베기"
    this.R: "굉장히 아프게 베기"
}

공장함수에 매개변수를 만들어 주었습니다 매개변수를 만들고 공장 함수를 호출할때
전달인자로 원하는 스킬이름을 적으면 해당 자리에 스킬이름이 바뀝니다



let 도적 = new 공장("훔치기")
	
    
    {q:"훔치기"
    W: "엄청 강하게 베기"
    E: "무척 아프게 베기"
    R: "굉장히 아프게 베기"}

새롭게 추가된 es6문법 class 에는 조금 다르게 작성할 수있습니다

class Factory { class는 대문자로 시작합니다
	
   construcotr(스킬1,스킬2,스킬3,스킬4){
     this.q = 스킬1
     this.w = 스킬2
     this.e = 스킬3
     this.r = 스킬4
   }
 }
 
 new Factory()

0개의 댓글