The Prototype Pattern

GoF는 복제를 통해 기존 객체의 템플릿을 기반으로 객체를 만드는 프로토 타입 패턴을 참조합니다.

프로토 타입 패턴은 다른 객체의 프로토 타입 역할을하는 객체를 만드는 프로토 타입 상속을 기반으로한다고 생각할 수 있습니다. 프로토 타입 개체 자체는 생성자가 만드는 각 개체의 청사진으로 효과적으로 사용됩니다. 사용 된 생성자 함수의 프로토 타입에 name과 같은 속성이 들어 있으면 (코드 샘플의 아래쪽에서와 같이) 동일한 생성자가 만든 각 객체에도 동일한 속성이 있습니다.

기존 (자바 스크립트가 아닌) 문헌에서이 패턴의 정의를 검토하면 클래스에 대한 참조가 다시 한 번 나타날 수 있습니다. 실제로 프로토 타입 상속은 클래스를 모두 사용하는 것을 피합니다. 이론 상으로는 "정의"객체 나 핵심 객체가 존재하지 않습니다. 우리는 단순히 기존 기능 개체의 복사본을 만드는 것입니다.

프로토 타입 패턴을 사용하면 얻을 수있는 장점 중 하나는 다른 언어의 기능을 모방하지 않고 JavaScript가 제공해야하는 프로토 타입의 강점과 함께 작업한다는 것입니다. 다른 디자인 패턴의 경우 항상 그렇지는 않습니다.

패턴은 상속을 구현하는 쉬운 방법 일뿐만 아니라 성능을 향상시킬 수있을뿐만 아니라 객체에서 함수를 정의 할 때 참조로 작성됩니다 (모든 하위 객체는 동일한 함수를 가리 킵니다) 자신의 개별 복사본을 만드는 대신

ECMAScript 5 표준에 정의 된대로 실제 프로토 타입 상속에 관심이있는 사람들은 Object.create (이 섹션의 앞부분에서 이미 살펴 보았습니다)를 사용해야합니다. Object.create는 지정된 프로토 타입을 가지며 선택적으로 지정된 속성 (예 : Object.create (prototype, optionalDescriptorObjects))을 포함하는 객체를 만듭니다.

아래 예제에서이를 확인할 수 있습니다.

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 );

또한 Object.create를 사용하면 객체가 다른 객체에서 직접 상속받을 수있는 차등 상속과 같은 고급 개념을 쉽게 구현할 수 있습니다. Object.create를 사용하면 두 번째 제공된 인수를 사용하여 객체 속성을 초기화 할 수 있습니다. 예 :

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

var car = Object.create(vehicle, {

  "id": {
    value: MY_GLOBAL.nextId(),
    // writable:false, configurable:false by default
    enumerable: true
  },

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

});

여기에서 앞서 살펴본 Object.defineProperties 및 Object.defineProperty 메서드에서 사용되는 것과 유사한 구문을 사용하여 개체 리터럴을 사용하여 Object.create의 두 번째 인수에서 속성을 초기화 할 수 있습니다.

prototypal 관계는 객체의 속성을 열거 할 때 문제를 일으킬 수 있으며 (Crockford가 권장하는 것처럼) 루프의 내용을 hasOwnProperty() 검사로 래핑하면 문제가 발생할 수 있습니다.

Object.create를 직접 사용하지 않고 프로토 타입 패턴을 구현하려는 경우 다음과 같이 패턴을 위에서와 같이 시뮬레이트 할 수 있습니다.

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() {};
  F.prototype = vehiclePrototype;

  var f = new F();

  f.init( model );
  return f;

}

var car = vehicle( "Ford Escort" );
car.getModel();

참고 :이 대안에서는 사용자가 동일한 방식으로 읽기 전용 속성을 정의 할 수 없습니다 (주의하지 않으면 vehiclePrototype이 변경 될 수 있음).

Prototype 패턴의 최종 대체 구현은 다음과 같습니다.

var beget = (function () {

    function F() {}

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

vehicle 기능에서이 방법을 참조 할 수 있습니다. 프로토타입 패턴은 객체를 프로토타입에 연결하는 것 이상의 초기화 개념을 포함하지 않으므로 여기서 vehicle은 생성자를 에뮬레이션합니다.