자바스크립트 개발자 포럼원본입니다.
프로토타입 디자인 패턴
자바스크립트 개발자는 상속때문에 혼란스럽게 하는 프로토타입이라는 키워드나, 코드에 이미 있는 프로토타입을 본적이 있을 것입니다.
프로토타입 디자인 패턴은 자바스크립트의 프로토타입 상속에 기초하고 있습니다.
프로토타입 모델은 높은 성능을 필요로하는 상황에서 객체를 만들기 위해 사용되곤합니다.
만들어진 객체들은 넘겨진 원조 객체의 분신들입니다.
프로토타입 패턴을 사용하는 경우는, 다른 어플리케이션에서 사용할 객체를 만들기 위해 광범위한 데이터베이스 연산을 수행해야할 때입니다.
만약 다른 어플리케이션에서 똑같은 연산을 수행해야한다면, 코드를 처음부터 다시 쓰는 것보다는 전에 만들어진 객체를 복제하는 편이 쉬울 것입니다.
위키피디아에서의 프로토타입 디자인 패턴
위의 UML은 어떻게 프로토타입 인터페이스가 다른 프로토타입들의 속성을 복제하여 삽입되어지는 것을 보여줍니다.
객체를 생성하기 위해, 생성자는 반드시 존재해야 합니다.
그리고, 프로토타입 객체에 변수와 메서드 키워드를 사용해 묶습니다.
아래 기본적인 예시를 보겠습니다.
var TeslaModelS = function(){
this.numWheels = 4;
this.manufacturer = 'Tesla';
this.make = 'Model S';
};
TeslaModelS.prototype.go = function(){
//뭔가를 하는 코드
}
TeslaModelS.prototype.stop = function(){
//뭔가를 하는 코드
}
생성자는 객체를 만들 수있는데, 새로운 객체를 만들었을 때 생성자 안에 초기화 시켰던 상태로 남아있습니다.
게다가 go와 stop을 관리하는 것은 쉽습니다. 왜냐하면 우리는 프로토타입으로 이미 정의를 해놨으니까요.
프로토타입에 변수나 메서드를 추가하는 비슷한 비슷한 방법은 아래 코드와 같습니다.
var TeslaModelS = function(){
this.numWheels = 4;
this.manufacturer = "Tesla";
this.make = "Model S";
}
TeslaModelS.prototype = {
go:function(){
//뭔가 하는 코드
},
stop: function(){
//뭔가 하는 코드
}
}
프로토타입 노출 패턴
모듈패턴과 비슷하게 프로토타입 패턴역시 역시 내부를 노출 할 수있습니다.
프로토타입 노출 패턴은 private 와 public 접근 요소들을 캡슐화 시킬 수 있습니다.
왜냐하면 변경가능한 객체를 반환할 수 있으니까요.
객체를 반환하기 때문에, 프로토타입 객체에 IIFE로 내부함수를 대입시킬 수 있습니다.
이를 통해 어떤 요소를 프로토타입에 대입할지 결정할 수있고, 함수 내부에있는 요소들을 보호할 수있습니다.
var TeslaModelS = function(){
this.numWheels = 4;
this.manufacturer "Tesla";
this.make = "Model S";
}
TeslaModelS.prototype = function(){
var go = function(){
//코드
};
var stop = function(){
//코드
};
return {
pressBrakePedal : stop,
pressGasPedal : go
}
}();
객체로 stop과 go가 반환될때 함수 내부에 있기 때문에 보호된다는 점에 주목해 주세요.
이런 방법으로 프로토타입 객체의 설정하는 방법으로 객체를 만들 때마다 똑같은 코드를 반복해서 쓸 필요가 없답니다.
중간 후기
번역하기 생각보다 까다롭네요.
그리고 내용이 제가 느끼기에 좀 심심하게 느껴지는데,
마저 번역하고 요즘 배우고 있는 좀더 세련된 패턴들을 올려야 겠습니다.