본문 바로가기
Language/JavaScript

[JavaScript] 프로토타입

by 며루치꽃 2020. 9. 10.

프로토타입 

var 프로토타입 = { // 공통되는 부분 
    type: '카드',
    attack: function() {},
    defend: function() {},
    };
    function 카드공장(name, att, hp){
        var 카드 = { // 달라지는 부분
            name: name,
            att: att,
            hp: hp,
        }
        카드.__proto__ = 프로토타입 // 객체이기 때문에 참조관계, 같은 부분은 같게가고
        return 카드;
}

만약 프로토타입을 이용하지 않고 카드의 type을 '카드'에서 '장난감'으로 바꿔야한다면 카드의 type을 '카드'에서 3만개 바꿔야한다고 가정하면 일일이 객체를 바꿔야한다. 하지만 공통된 부분을 프로토타입을 이용해서 중복을 최소화 할 수 있다.

프로토타입은 객체이기 때문에 참조 관계인데 

프로토타입.type = 장난감;

이렇게 바꾸면 중복을 최소화 처리할 수 있다. 

 

또한, 객체의 속성을 바꾸거나 객체의 속성을 추가할때도, 프로토타입을 사용할 수 있다.

만약 카드에 width = 100, height = 300이라는 속성을 추가해야한다면 

프로토타입.width = 100
프로토타입.height = 300 

 

위의 형태를 통해 바꿀 수 있다. 

 

프로토타입을 한마디로 정의하자면, 객체들간에 공유되는 것을 프로토타입에 넣어둔다.

공유되는 것을 따로 보관해야하는 이유는 한꺼번에 추가, 삭제, 변경을 할 수 있기 때문이다. 

 

하지만 실무에서는 __proto 를 사용하면 안된다. 그 이유는 표준이 아니기 떄문이다. 

 

Object.create

 

Object.create를 통해 __proto 대신에

var 프로토타입 = { // 공통되는 부분 
    type: '카드',
    attack: function() {},
    defend: function() {},
    };
    function 카드공장(name, att, hp){
        var 카드 = Object.create(프로토타입);
            카드.name = name,
            카드.att = att;
            카드.hp = hp;
        return 카드;
}

이렇게 바꿀수 있다. 

 

참고

  • 인프런 - 제로초 강의 

'Language > JavaScript' 카테고리의 다른 글

[JavaScript] for, forEach  (0) 2020.09.14
[JavaScript] 생성자와 new  (0) 2020.09.11
[JavaScript] 객체를 복사하는 방법  (0) 2020.09.08
[JavaScript] 참조와 복사  (0) 2020.09.07
[JavaScript] classList  (0) 2020.09.04

댓글