팩토리 패턴, 프로토타입

🔷 팩토리 패턴

 

function 카드공장 (name, att, hp){
    return{
        name:name,
        att:att,
        hp:hp,
        type:'카드',
        attack:function(){},
        defend:function(){},
    };
}

let card = 카드공장('토끼',10,10);

card
//{name: "토끼", att: 10, hp: 10, type: "카드", attack: ƒ, …}
//att: 10
//attack: ƒ ()
//defend: ƒ ()
//hp: 10
//name: "토끼"
//type: "카드"
//__proto__: Object

let card2 = 카드공장('거북이',20,20);

card2
//{name: "거북이", att: 20, hp: 20, type: "카드", attack: ƒ, …}
//att: 20
//attack: ƒ ()
//defend: ƒ ()
//hp: 20
//name: "거북이"
//type: "카드"
//__proto__: Object

 

🔶 프로토타입

 

let prototype = {
    type:'카드',
    attack:function(){},
    defend:function(){},
}

let card = {
    name : "토끼",
    att: 10,
    hp:10,
}

card.__proro__ = prototype;
//{type: "카드", attack: ƒ, defend: ƒ}
//attack: ƒ ()
//defend: ƒ ()
//type: "카드"
//__proto__: Object

card
//{name: "토끼", att: 10, hp: 10, __proro__: {…}}
//att: 10
//hp: 10
//name: "토끼"
//__proro__: {type: "카드", attack: ƒ, defend: ƒ}
//__proto__: Object

 

- 프로토타입은 접근할때

card.__proto__.type → card.type → "__proto__"는 생략이 가능하다.

 

 

 

🔶🔷 팩토리패턴 내 프로토타입

 

function 카드공장 (name, att, hp){
   let 객체 ={
       name:name,
       att:att,
       hp:hp,
   }
    객체.__proto__= {
       type:'카드',
       attack:function(){},
       defend:function(){},
    }
    return 객체;
}

let card2 = 카드공장("여우",10,10);

card2
//{name: "여우", att: 10, hp: 10}
//att: 10
//hp: 10
//name: "여우"
//__proto__:
//attack: ƒ ()
//defend: ƒ ()
//type: "카드"
//__proto__: Object

 

 

프로토타입을 쓰는 이유

 

let 프로토타입= {
       type:'카드',
       attack:function(){},
       defend:function(){},
};
function 카드공장 (name, att, hp){
   let 카드 ={
       name:name,
       att:att,
       hp:hp,
   }
    카드.__proto__ = 프로토타입;
    return 카드;
}

let card1 =카드공장('토끼');

card1
//{name: "토끼", att: undefined, hp: undefined}att: undefinedhp: undefinedname: "토끼"__proto__: attack: ƒ ()defend: ƒ ()type: "카드"__proto__: Object

card1.type
//"카드"

프로토타입.type = "장난감"
//"장난감"

card1.type
//"장난감"

 

- card마다 type을 변경하지말고, 프로토타입의 type을 장난감으로 한번만 수정하여 모든 card의 type이 변경될 수 있도록

 

 

항목을 하나 더 추가할 경우!

 

let 프로토타입= {
       type:'카드',
       attack:function(){},
       defend:function(){},
};
function 카드공장 (name, att, hp){
   let 카드 ={
       name:name,
       att:att,
       hp:hp,
   }
    카드.__proto__ = 프로토타입;
    return 카드;
}

let card2 = 카드공장('마우스',20,20);

card2
//{name: "마우스", att: 20, hp: 20}
//att: 20
//hp: 20
//name: "마우스"
//__proto__:
//attack: ƒ ()
//defend: ƒ ()
//type: "카드"
//__proto__: Object

프로토타입.width = 200;

card2
//{name: "마우스", att: 20, hp: 20}
//att: 20
//hp: 20
//name: "마우스"
//__proto__:
//attack: ƒ ()
//defend: ƒ ()
//type: "카드"
//width: 200
//__proto__: Object

 

- 프로토타입에 width를 추가했는데 card2에도 width가 추가된 것을 확인할 수 있다.