[javascript] Prototype Pattern (4)

in #kr7 years ago

We POST 23 kinds of GOF design patterns implemented in javascript. Today, we'll look at the prototype pattern for the fourth time.


(javascript로 구현하는 GOF 디자인 패턴 23가지를 POST 하고 있습니다. 오늘은 네번째로 prototype Pattern 에 대하여 알아 보겠습니다.)

1. Overview

  • Wiki: The type of object to be created is determined by the prototype instance and the instance is cloned to create a new object.
    (생성할 객체들의 타입이 프로토타입인 인스턴스로부터 결정되도록 하며, 인스턴스는 새 객체를 만들기 위해 자신을 복제(clone)하게 됩니다.)
  • The prototype pattern does not create a new object, but replicates an existing object.
    (prototype pattern은 생성할 객체들을 신규로 생성하지 않고 기존에 생성한 객체를 복제 하여 사용 합니다.)

2. UML diagram


skip

3. Example code


The following code is a code for creating a new Zealot in Starcraft, then replicating the generated Zealot.
(다음 코드는 스타크래프트의 질럿을 하나 신규로 생성하고, 그다음 부터는 생성된 질럿을 복제하여 사용하는 코드 입니다.)


var Zealot = function(name){
    var _this = this;
    var _name = name;
    var _shild = 0;
    var _defense = 0;
    var _power = 0;
    var _speed = 0;
    this.getName = function(){
        return _name;
    };
    this.setName = function(name){
        _name = name;
    };
    this.getShild = function(){
        return _shild;
    };
    this.setShild = function(shild){
        _shild = shild;
    };
    this.getDefense = function(){
        return _defense;
    };
    this.setDefense = function(defense){
        _defense = defense;
    };
    this.getPower = function(){
        return _power;
    };
    this.setPower = function(power){
        _power = power;
    };
    this.getSpeed = function(){
        return _speed;
    };
    this.setSpeed = function(speed){
        _speed = speed;
    };
    this.getInfo = function(){
        var info = {
            name:_name,
            shild:_shild,
            defense:_defense,
            power:_power,
            speed:_speed
        }
        return JSON.stringify(info);
    };
    this.clone = function() {
        var cloneObj = this;
        if(this.__isClone) {
            cloneObj = this.__clonedFrom;
        }
        var temp = function() { return cloneObj.apply(this, arguments); };
        for(var key in this) {
            temp[key] = this[key];
        }
        temp.__isClone = true;
        temp.__clonedFrom = cloneObj;
        return temp;
    }
};

//client
var orign_zealot = new Zealot("orign_zealot");
orign_zealot.setShild(100);
orign_zealot.setDefense(150);
orign_zealot.setPower(50);
orign_zealot.setSpeed(80);
console.log(orign_zealot.getInfo());
//out : {"name":"orign_zealot","shild":100,"defense":150,"power":50,"speed":80}

var clone_zealot1 = orign_zealot.clone();
clone_zealot1.setName("clone_zealot1");
console.log(orign_zealot.getInfo());
//out : {"name":"clone_zealot1","shild":100,"defense":150,"power":50,"speed":80}

var clone_zealot2 = orign_zealot.clone();
clone_zealot2.setName("clone_zealot2");
console.log(orign_zealot.getInfo());
//out : {"name":"clone_zealot2","shild":100,"defense":150,"power":50,"speed":80}

4. Postscript

When you create a new object, you have a lot of resources. If you create 200 zealots, you will spend a lot of resources to set the zeitot's property information. The prototype pattern is implemented to replicate the generated object and minimize resource consumption when it is newly created. (객체를 신규로 생성할 때 많은 자원이 들어갑니다. 만약 zealot 200개 생성 할경우 질럿의 property 정보들을 설정하기 위해 많은 자원을 소비하게 됩니다. prototype pattern은 생성된 객체를 복제하여 신규로 생성할 때 발생되는 자원 소비를 최소화 하기 위해 구현합니다.)
Sort:  

Congratulations @lsh1117! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the total payout received
Award for the number of comments received

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

@lsh1117 got you a $1.51 @minnowbooster upgoat, nice!
@lsh1117 got you a $1.51 @minnowbooster upgoat, nice! (Image: pixabay.com)


Want a boost? Click here to read more!

Amazing job @lsh1117 Followed...

thank you.