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

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

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

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을 찍어보면 아래와 같이 프로토타입 객체가 만들어져 있는 것을 볼 수 있다.

prototype javascript

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

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

답글 남기기

5 × 1 =