[JavaScript] Design Pattern - Prototype Pattern

자바스크립트의 상속과 성능향상을 위하여서는 Prototype Pattern을 갖는 Prototypal Inheritance를 이용한다.

개념

  - ECMAScript 5에서 Object.create 로 가능하다 

var myCar = {
  name: "Ford Escort",
  drive: function () {
    console.log( "Weeee. I'm driving!" );
  },
  panic: function () {
    console.log( "Wait. How do you stop this thing?" );
  }
};

// Use Object.create to instantiate a new car
var yourCar = Object.create( myCar );

// Now we can see that one is a prototype of the other 

console.log( yourCar.name );

 

  - 오브젝트 확장할 때 

var vehicle = {
  getModel: function () {
    console.log( "The model of this vehicle is.." + this.model );
  }
};

// 두번째 인자에서 확장한다 Mixin...
var car = Object.create(vehicle, {
  "id": {
    value: MY_GLOBAL.nextId(),
    // writable:false, configurable:false by default
    enumerable: true 
  },

  "model": {
    value: "Ford",
    enumerable: true
  }
}); 

  - Object.create를 사용하지 않고 Construct Function의 prototype 프로퍼티를 이용하여 prototypal inheritance 구현 

var vehiclePrototype = {
  init: function ( carModel ) {
    this.model = carModel;
  },
  getModel: function () {
    console.log( "The model of this vehicle is.." + this.model);
  }
};

function vehicle( model ) {
  function F() {};
  // 일급 클래스 펑션의 prototype을 vehiclePrototype객체로 정의 
  // 상단 이미지에서 Foo의 프로퍼티인 propertype 변수에 Foo.prototype 객체를 참조한다
  F.prototype = vehiclePrototype;

  // new를 하면 vechiclePrototype객체가 f 변수에 할당 된다 
  var f = new F();
  f.init( model );
  return f;
}

var car = vehicle( "Ford Escort" ); 

console.log(car.getModel());

다른 방법으로 proto 전달 

var beget = (function () {
    function F() {}
    return function ( proto ) {
        F.prototype = proto;
        return new F();
    }; 

})();

다양한 Object creation으로 메소드 확장하기

  - 메소드안에 정의 

    + getInfo는 Car 생성때 마다 생성되므로 메모리를 차지한다 (안좋음) 

function Car(make, model, level, color, warranty) {

    this.make     = make;

    this.model    = model;

    this.level    = level;

    this.color    = color;

    this.warranty = warranty;

    

    this.getInfo = function() {

        return this.make + ', ' + this.model + ', ' + this.level + ', '+ this.color + ', ' + this.warranty;

    };

}

 

var aCar = new Car('Acura', 'TL', 'Sport', 'blue', 5);

console.log(aCar.getInfo());  //displays Acura, TL, Sport, blue, 5 

  - 메소드를 외부에서 Prototype에 지정하기 

    + 필요한 시점에 메소드를 추가할 수 있다 예) Car.prototype.accelerate 

function Car(make, model, level, color, warranty) {

    this.make     = make;

    this.model    = model;

    this.level    = level;

    this.color    = color;

    this.warranty = warranty;

}

 

Car.prototype.getInfo = function() {

  return this.make +','+ this.model +','+ this.level +','+ this.color +','+ this.warranty;

};

 

var aCar = new Car('Acura', 'TL', 'Sport', 'blue', 5);

alert(aCar.getInfo());  //displays Acura, TL, Sport, blue, 5

 

Car.prototype.accelerate = function() {

    return 'How fast?';

};

console.log(aCar.accelerate()); //displays "How fast?"

  - Prototype Pattern을 이용

    + prototype에 필요한 메소드를 Literal 객체로 지정한다 

function Car(make, model, level, color, warranty) {

    this.make     = make;

    this.model    = model;

    this.level    = level;

    this.color    = color;

    this.warranty = warranty;

}

 

Car.prototype = {

    getInfo: function () {

      return this.make +','+ this.model +','+ this.level +','+ this.color +','+ this.warranty;

    }

};

  - Revealing Prototype Pattern을 이용

    + prototype에 객체를 생성하여 할당한다 

var UsedCar = function(mileage) {

    //Define a variable unique to each instance of UsedCar

    this.mileage = mileage;

};

 

UsedCar.prototype = new Car('Honda', 'Civic', 'LX', 'gray', 2);

// Revealing Module Pattern 형식

UsedCar.prototype = function () { }();

<참조>

  - 원문 : The Prototype Pattern

  - Some Prototype Pattern 사용하기 

  - Revealing Prototype Pattern 사용하기

  - 드미트리 소스시코브의 JavaScript Core