[자바스크립트 디자인 패턴] 프로토 타입 패턴

목록

• 싱글톤 패턴 (Singletpm Pattern)
• 모듈 패턴 (Module Pattern)
• 옵저버 패턴 (Observer Pattern)
• 프로토타입 패턴 (Prototype Pattern)

---

JavaScript 에서 Java 와 같이 클래스의 개념을 적용하기 위해 필요한 개념입니다. 

1. 인터페이스 역할을 할 Component 객체를 생성하고 공통변수와 공통함수를 작성합니다.
2. Component 객체를 상속받는 Circle 객체를 생성하고, Circle 생성자에 Component가 아닌 Circle 을 집어넣어서 부모 생성자를 참조하지 않도록 하고, Circle 생성자 내부에 부모생성자를 이용하는 코드를 작성해줍니다. 
3. Circle 의 프로토타입에 Component 객체를 참조하도록 작성합니다.
4. Circle 에서만 필요한 변수와 함수를 정의합니다.

작성코드

1) Component 객체

var Component = function(x, y, c){
    var posX = x || 0;
    var posY = y || 0;
    var color = c || '#000000';

    // X 좌표
    this.getPosX = function(){
        return posX;
    }
    this.setPosX = function(){
        posX = x;
    }

    // Y 좌표
    this.getPosY = function(){
        return posY;
    }
    this.setPosY = function(y){
        posY = y;
    }

    // 색상
    this.getColor = function(){
        return color;
    }
    this.setColor = function(c){
        color = c;
    }
}

 

2) Circle 객체

// 1. Component 객체 상속
var Circle = function (x, y, c){
    Component.call(this, x,y,c);
};
Circle.prototype = Object.create(Component.prototype);
Circle.prototype.constructor = Circle;

// 2. 추가로 필요한 변수 및 함수를 선언
Circle.prototype.radius = 0;
Circle.prototype.getRadius = function(){return this.radius;};
Circle.prototype.setRadius = function(r){this.radius = r;};

 

사용코드

// 사용코드
var circle = new Circle();

circle.getPosX();
circle.getPosY();
circle.getColor();
circle.getRadius();