팩토리패턴과 프로토타입 만들기

자바스크립트에서 프로토타입, 팩토리패턴 함수를 이용하여 중복되는 것들을 공장처럼 찍어낼 수 있다.

위와 같은 스타캐릭터를 계속 찍어내는 공장이 있다. 이것을 자바스크립트 코딩으로 표현하면 아래와 같다.

let starChar1 = {
  이름: '테란',
  공격력격력: 3,
  체력: 10,
  타입: '캐릭터',
  공격: function(){/*공격코드*/},
  방어: function(){/*방어코드*/},
};
Code language: JavaScript (javascript)

let starChar2 = {
  이름: '드라군',
  공격력격력: 5,
  체력: 18,
  타입: '캐릭터',
  공격: function(){/*공격코드*/},
  방어: function(){/*방어코드*/},
};
Code language: JavaScript (javascript)

이런식으로 계속 만들어줘야 한다. 이것은 반복작업을 피하기 위해 함수로 아래와 같이 만들 수 있다.

function starCharFactory(name,att,hp){
  return{
    이름: name,
    공격력격력: att,
    체력: hp,
    타입:'캐릭터',
    공격: function(){/*공격코드*/},
    방어: function(){/*방어코드*/},
  }
}

let 테란= starCharFactory('일꾼',5,8);
let 프로토스= starCharFactory('드라군',3,15);
let 저그= starCharFactory('질럿',10,3);
Code language: JavaScript (javascript)

위와 같이 함수로 만들어서 스타캐릭터공장()함수만 계속 실행시키면 만들 수 있다.

프로토타입 만들기

우리가 var aa = {}; 이런식으로 빈 객체만 만든후, 콘솔에서 보면 __proto__라는 것이 보인다. 객체안에 기본으로 들어가 있는 프로토타입들이 쭈욱~ 나열된다.

그렇다면 프로토타입을 개인적으로 만들어서 사용하면 편하지 않을까!

그래서 위의 함수를 이용해서 만든 캐릭터공장 중에서 중복되는 타입, 공격, 방어 함수를 프로토타입으로 만들어보자.

// 위의 함수를 2개로 나눠보자.
let teran = {
  이름: '테란',
  공격력격력: 3,
  체력: 10,
}

let 공격방어= {
  타입: '캐릭터',
  공격: function(){console.log('공격하라')},
  방어: function(){console.log('방어좀해')},
}

// 공격방어를 테란종족의 프로토타입으로 만들자.
teran.__proto__ = 공격방어;

console.log(teran);
Code language: JavaScript (javascript)

teran.__proto__ = 공격방어;
Code language: JavaScript (javascript)

위의 한줄 코드가 프로토타입을 만들어주는 코드 입니다. 종족이 아무리 많아도 “let 공격방어 ={…}에서 내용을 수정하면 모든 종족에 그대로 반영되게 됩니다. 한방에 모든종족을 바꿀 수 있게됩니다.

왜냐하면 위의 프로토타입을 만들어주는 한줄코드는 원시형의 값을 복사하는 것이 아닌 오브젝트를 복사하게되어 단순히 참조만 하기 때문입니다.

위와 같이 이제는 함수들이 __proto__ 안으로 들어갔다. 그렇다면 저 프로토 안으로 들어간 것들에 대해 어떻게 접근할 것인가 하는 것이다.

teran.__proto__.공격(); 
Code language: JavaScript (javascript)

이런식으로 사용할 수 있다. 그런데 여기서 __proto__는 생략할 수 있다. 그래서 보통은 아래와 같이 사용한다.

teran.공격();  //결과: 공격하라
zug.방어();  //저그jong 변수가 있다면 '방어좀해'
Code language: JavaScript (javascript)

위와 같은 식으로 프로토타입을 만들어서 사용한다. 이제 프로토타입으로 만들어진 것은 편하게 불러다 쓸수 있다.

그런데 문제는 자바스크립트에서 굉장히 공신력있는 MDN에서는 __proto__ 이것을 사용하지 말라고 언급되어 있다. 이유는 잘 모르겠지만 암튼 사용하는 것을 권하지 않는다고 한다.

그래서 우리는 Object.create() 함수를 이용해서 프로토타입을 구현한다.

let attDef = {
  타입: '캐릭터',
  공격: function(){console.log('공격하라')},
  방어: function(){console.log('방어좀해')},
}

function starCharFactory(name,att,hp){
    let 공방= Object.create(attDef);   //★
    공방.name = name;
    공방.attack = att;
    공방.health = hp;
    return 공방
}

let terran = starCharFactory('일꾼',5,8);
let protos = starCharFactory('드라군',3,15);
let zug = starCharFactory('질럿',10,3);

terran.공격();
zug.방어();
Code language: JavaScript (javascript)

위와 같이 코드를 수정하고 크롬에서 terran을 찍어보면 아래와 같이 프로토타입 객체가 만들어져 있는 것을 볼 수 있다.

오늘은 프로토타입에 대해서 알아봤습니다. 한마디로 프로토타입은 객체들간에 고유되고 있는 것들을 넣어두는 곳 정도로 이해할 수 있습니다. 나중에 한방에 수정할 수 있으니까 이용하면 좋다는 것도 함께 알아두면 좋습니다.

그럼 즐거운 하루 되세요. nscworl.net